CSS导航栏悬停问题

Question

我正在处理一个具有水平居中导航栏的网站。该导航栏的两端必须有圆角以及悬停效果。所有这些都基本上可以实现，但问题是导航栏的悬停超出了实际大小。此外，每个元素之间存在轻微的白色空间。如jsfiddle所示，它看起来不太对。另一个重要的注意事项是，导航栏必须与Bootstrap和响应功能一起使用。这意味着不能使用绝对定位或浮动等。下面我还附上了HTML和CSS代码。

<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;
}

- Sm00rf9000

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标签都在新的标签开始前结束。这里也有一个可行的示例！所以不需要使用position或float！

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

- Unknown Potato

---

你是一个英雄！非常感谢你。 - Sm00rf9000

我编辑了答案，改回到 a 标签并更改 padding，然后它就可以完美地工作 =) - Unknown Potato

Answer 2

如果你想解决溢出悬停问题，只需更改CSS中的这部分即可。

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

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

如果这正是您想要实现的，或者还有其他问题，请告诉我。

- rifa29

---

非常感谢您的输入，它确实解决了悬停问题。虽然每个单词或元素之间仍然存在一小段“空隙”，您知道我该如何修复它吗？ - Sm00rf9000

你可以在这个类 ul.naviTop li 中添加 margin-right: -4px;。这是 fiddle 链接 https://jsfiddle.net/v3oq5jr5/ -- 如果有其他修复方法，请参阅此处 https://css-tricks.com/fighting-the-space-between-inline-block-elements/。 - rifa29

Answer 3

您还可以设置没有"a"的悬停效果

ul.naviTop li:hover {...}

这样看起来更好。

- Paweł Swajdo

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>

- Michael Coker