如何使導航欄中的圖像可點擊？

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。