html - CSS 导航栏悬停问题

Question

我正在开发一个居中水平导航栏的网站。此栏的端部必须有圆 Angular 以及悬停效果。所有这些都可以正常工作，但问题是导航栏的悬停超出了栏的实际大小。除此之外，每个元素之间都有一个轻微的空白。正如您在下面看到的 jsfiddle它看起来不太正确。另一个重要的注意事项是，导航栏必须与 Bootstrap 和响应功能一起使用。这意味着没有什么可以绝对定位或 float 等。在下面我还附上了 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 背景而不让蓝色溢出所有东西..这最容易通过更改 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 标签是如何在新标签开始之前结束的。这也是一个工作 fiddle !所以不需要使用位置或 float !

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