刪除導航欄（不可見）填充

我正在試圖在我的網站上創建一個水平導航欄。問題是當我將鼠標懸停在其中一個選項上時。它突出顯示，但不是我想要的。這是結果：刪除導航欄（不可見）填充

正如你可以看到有一些空間，這也應該被強調，但它不是。

我的HTML和CSS：

.section ul { 
 
    list-style: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background-color: #5fb763; 
 
} 
 
.section ul li { 
 
    display: inline-block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 0.8em; 
 
    width: 200px; 
 
    height: 100%; 
 
} 
 
.section ul li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
.section ul li a:hover { 
 
    background-color: #f0f0f0; 
 
    height: 100%; 
 
} 
 
.section ul li a.active { 
 
    background-color: rgba(198, 186, 186, 0.73); 
 
    color: #444; 
 
}

<body> 
 
    <ul> 
 
    <li class="home"><a href="#section1">El local</a> 
 
    </li> 
 
    <li class="tutorials"><a href="#section2">Como Llegar</a> 
 
    </li> 
 
    <li class="about"><a class="active">Historia</a> 
 
    </li> 
 
    </ul> 
 
    <hr /> 
 
    <hr /> 
 
</body>

來源

2015-09-24 Aldridge1991

添加line-height在li

line-height: 21px;

.section ul { 
 
    list-style: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background-color: #5fb763; 
 
} 
 
.section ul li { 
 
    display: inline-block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 0.8em; 
 
    width: 200px; 
 
    height: 100%; 
 
    line-height: 21px; 
 
} 
 
.section ul li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
.section ul li a:hover { 
 
    background-color: #f0f0f0; 
 
    height: 100%; 
 
} 
 
.section ul li a.active { 
 
    background-color: rgba(198, 186, 186, 0.73); 
 
    color: #444; 
 
}

<div class="section"> 
 
    <ul> 
 
    <li class="home"><a href="#section1">El local</a> 
 
    </li> 
 
    <li class="tutorials"><a href="#section2">Como Llegar</a> 
 
    </li> 
 
    <li class="about"><a class="active">Historia</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2015-09-24 12:30:16

太棒了！奇蹟般有效！ – Aldridge1991

如果您不需要支持IE8。我會考慮使用nav標籤來代替您的需求。考慮下面的片段;

nav { 
 
    text-align: center; 
 
    background-color: green; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    transition: .3s background-color; 
 
} 
 
nav a:hover { 
 
    background-color: #f0f0f0; 
 
} 
 
nav a.active { 
 
    background-color: rgba(198, 186, 186, 0.73); 
 
    color: #444; 
 
}

<body> 
 
    <nav> 
 
    <a href="#section1">El local</a> 
 
    
 
    <a href="#section2">Como Llegar</a> 
 

 
    <a class="active">Historia</a> 
 
    </nav> 
 
</body>

根據您目前的解決方案，您將需要浮動li元素，以獲得與指定的寬度，我相信正確的行爲。你也可以考慮一個flexbox解決方案。

創建CSS導航條here有一些簡單的指導原則。

希望能幫助你！

來源

2015-09-24 12:22:48 jh3y

感謝隊友！很好的答案，但我更容易添加行高:) – Aldridge1991

不用擔心。啊，是的，這很公平:)只是要小心不要定義太多的屬性，這可能會讓佈局組件更復雜，以便在需要進行更改時維護下線。 – jh3y

刪除導航欄（不可見）填充

回答

相關問題