如何使导航栏中的图像可点击？

Question

我目前为我的大学作业网站创建了一个导航栏。 我已经在他们的图像上实现了一个图像，这是我想链接到大学主页的大学标志。 但是，当我尝试使用锚标记 '' 使图像可单击以链接到主页时，它会弄乱我的导航栏的样式，并且想知道是否有解决方法。 我知道问题是图像将采用我为导航栏声明的锚标签的 styles。 我将包含创建链接之前和之后的图像，并显示该部分的 HTML 和 CSS。

这是使图像可点击之前的导航栏。

这是它的 HTML：

<div class="top_nav"> 
    <img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
    <a class="active" href="#Home"> Home </a>
    <a href="#Hackathon">Hackathon</a>
    <a href="#Choose_a_Challenge">Choose a Challenge</a>
    <a href="#Digital_Horizons"> Digital Horizons </a>
</div>

这是它的 CSS：

.top_nav {
    overflow: hidden;
    background-color: #2c3e50;
    border-bottom: 20px solid #ed0162;
    position: fixed;
    top: 0;
    width: 100%;
}

.top_nav a {
    float: left;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
    font-size: 17px;
    margin-bottom: 0;
    font-family: monospace;

}

.top_nav a:hover {
    background-color: #ed0162;
    color: white;
}


.logo {
    float: left;
    margin: 15px;
}

这是我尝试使图像可点击后的 HTML 和网页：

现在之间有很大的间距，当我不想要它时，hover 样式现在会影响图像。

HTML 代码后：

<header>

    <div class="top_nav"> 
        <a href="https://www.ntu.ac.uk/">
        <img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
        </a>
        <a class="active" href="#Home"> Home </a>
        <a href="#Hackathon">Hackathon</a>
        <a href="#Choose_a_Challenge">Choose a Challenge</a>
        <a href="#Digital_Horizons"> Digital Horizons </a>


    </div>

</header>

我尝试从图像样式中删除“徽标”class，但它并没有真正改变它。

Answer 1

有很多方法可以做到这一点，但 flexbox 让它变得非常容易。 还将简化您的 css。 只需将图像包装在锚标记中以使其可点击。

 .top_nav { display:flex; justify-content:space-around; align-items:center; overflow: hidden; background-color: #2c3e50; font-size:2vw; width: 100%; }.top_nav a { width:10%; color: white; text-decoration: none; font-family: monospace; }.top_nav a:hover { background-color: #ed0162; color: white; } img{ width:100%; } #short{ width:2.5%; }

 <div class="top_nav"> <a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a> <a class="active" href="#Home"> Home </a> <a href="#Hackathon">Hackathon</a> <a href="#Choose_a_Challenge">Choose a Challenge</a> <a href="#Digital_Horizons"> Digital Horizons </a> </div>

Answer 2

解决此问题的一种方法是使用:first-of-type伪 css 选择器。 这样的事情将是处理它的正确方法：

.top_nav a:first-of-type {padding: 0;}

编辑

对不起，在最初的答案中，我错过了建议您用元素包装图像a部分。 所以改变这个：

<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">

至：

<a href="URL" target="_blank">  <img class="logo" src="images/NTU_badge.png" alt="NTU Badge" /></a>

Answer 3

由于这个确切的原因，我发现在 CSS 选择器中使用元素名称（例如a和div ）通常是非常糟糕的做法。

考虑为导航栏中的每个链接添加类似class="navigation"的内容，然后将.top_nav a选择器更改为.top_nav.navigation 。 然后，您可以将类似的 class 添加到徽标<a>中。

这不仅使 CSS 更具体，而且当其他人（或六个月后的您）在没有页面 rest 的任何其他上下文的情况下查看此内容时，更具可读性。

Answer 4

我现在将我的 css 更改为：

.top_nav {
    overflow: hidden;
    background-color: #2c3e50;
    border-bottom: 20px solid #ed0162;
    position: fixed;
    top: 0;
    width: 100%;

}

.top_nav .navigation {
    float: left;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
    font-size: 17px;
    margin-bottom: 0;
    font-family: monospace;


}

.top_nav .navigation:hover {
    background-color: #ed0162;
    color: white;
}

.top_nav .navigation:active {
  background-color: #ed0162;
  color: white;

然后我将每个 class 添加到导航栏中的每个链接，就像时髦所说的那样，但是活动的 css 在该页面上不再适用，“活动”页面名称应该在导航栏中显示为粉红色，但它没有，任何想法?

Answer 5

去除margin: 15px; 从.logo css 属性似乎有助于收紧它。

Answer 6

您可以将您的图像嵌套在内部，并为该链接单独设计适当的 css。