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

所以我认为你基本上把所有东西都放在这里只有一些小细节..如果我正确理解你的问题你想填充你的背景而没有蓝色溢出一切..这是最简单的改变padding:14px 16px; 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：悬停。 {...}

它看起来也更好。

Answer 4

问题是你有padding: 14px 16px; on .navTopRight li a ，设置为display: inline; 。 你不能给内联元素赋予垂直margin / padding / etc，并让它影响它之前/之后的元素。 因此，当您将鼠标悬停在这些链接上并应用背景颜色时，它看起来非常奇怪，因为垂直填充变得可见。 假设当链接没有悬停时导航菜单看起来像你想要的那样，只需从链接中删除那个垂直（顶部/底部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>