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

所以我认为你基本上把所有东西放在这里只有一些小细节..如果我正确地理解你的问题你想填充你的背景而没有蓝色溢出一切..这是最容易做到的改变{ {1}}至padding:14px 16px;

之后你想要删除空白空格，通过更改你的html代码结构可以非常简单地实现：

padding:0px 16px;

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS导航栏悬停问题

HTML

CSS

4 个答案: