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

Question

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

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

之后的 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>

我试过从图像样式中删除“ Logo ”类，但实际上并没有太大改变。

Answer 1

有很多方法可以做到这一点，但 flexbox 让它变得非常简单。也将简化你的CSS。只需将图像包裹在 anchor 标记中即可使其可点击。

.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>