CSS导航栏悬停问题

Question

我正在开发一个具有居中水平导航栏的网站。该条的端部必须具有圆角以及悬停效果。所有这一切都是可行的，但问题是导航栏的悬停超出了栏的实际大小。除此之外，每个元素之间都有轻微的空白。正如您在下面的jsfiddle 中看到的那样，它看起来不太正确。另一个重要的注意事项是导航栏必须与 Bootstrap 和响应功能一起使用。这意味着没有任何东西可以定位绝对或浮动等。在下面我还附上了 html 和 css 代码。

HTML

<div class="navTopRight">
 <ul class="naviTop">
 <li class="first"><a href="index.html">Home</a></li>
 <li><a href="#scrollToBot">Item1</a></li>
 <li><a href="Item2.html">Item2</a></li>
 <li><a href="Item3.html">Item3</a></li>
 <li class="last"><a href="Item4.html">Item4</a></li>
 </ul>
 </div>

CSS

.navTopRight{
    text-align:center;
    list-style-type: none;
    margin-top: 30px;
    padding: 0;
}

ul.naviTop li {
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;
}

.navTopRight li:last-child {
    border-right: none;
}

.navTopRight li a{
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display: inline;
} 

ul.naviTop li a:hover {
    background-color:#0099bf;
}

li.first{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
li.last{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}

Answer 1

所以我认为您基本上在这里拥有一切，只有一些小细节.. 如果我正确理解您的问题，您只想填充您的 li 背景，而不会使蓝色溢出所有内容.. 最简单的方法是更改​​ @ 987654322@转padding:0px 16px;

之后，您希望删除空白区域，这可以通过更改您的 html 代码结构来实现，如下所示：

                <li class="first"><a href="index.html">Home</a></li
                ><li><a href="#scrollToBot">Item1</a></li
                ><li><a href="Item2.html">Item2</a></li
                ><li><a href="Item3.html">Item3</a></li
                ><li class="last"><a href="Item4.html">Item4</a></li>

注意所有的 li 标签是如何在新标签开始之前结束的。这也是一个工作小提琴！所以不需要使用位置或浮动！

https://jsfiddle.net/nfztdxr2/3/

Answer 2

如果您想修复溢出悬停，只需更改这部分 css

ul.naviTop li {
   border:1px solid black;
   display: inline; -> *display: inline-block;*
   overflow:hidden;
   background-color:#003340;
}

这是结果https://jsfiddle.net/nfztdxr2/

让我知道这是否是您尝试实现的目标，或者可能还有其他问题？

Answer 3

你也可以设置没有“a”的悬停

ul.naviTop li:hover。 {...}

它看起来也更好。

Answer 4

问题是您在.navTopRight li a 上有padding: 14px 16px;，它设置为display: inline;。您不能为内联元素提供垂直边距/填充/等，并让它影响它之前/之后的元素。因此，当您将鼠标悬停在这些链接上并应用背景颜色时，它看起来真的很奇怪，因为垂直填充变得可见。假设链接未悬停时导航菜单看起来像您想要的那样，只需从链接中删除垂直（顶部/底部14px）填充。

.navTopRight{
	text-align:center;
	list-style-type: none;
    margin-top: 30px;
    padding: 0;
}

ul.naviTop li {
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;
}

.navTopRight li:last-child {
    border-right: none;
}

.navTopRight li a{
    color: white;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
} 

ul.naviTop li a:hover {
	background-color:#0099bf;
}

li.first{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
li.last{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}

 <div class="navTopRight">
                    <ul class="naviTop">
                    <li class="first"><a href="index.html">Home</a></li>
                    <li><a href="#scrollToBot">Item1</a></li>
                    <li><a href="Item2.html">Item2</a></li>
                    <li><a href="Item3.html">Item3</a></li>
                    <li class="last"><a href="Item4.html">Item4</a></li>
                </ul>
                </div>