为新的网站设计构建了一个简单的无下拉水平导航,它的工作正常,除了2个按钮之间是一个虚幻的白色空间,不会出现在dragonfly的指标或代码中,但在屏幕上可见当李的悬停规则适用时.它并没有出现在每个li之间,只是在两个特定的lis之间.我附上的图片显示我的意思:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}Run Code Online (Sandbox Code Playgroud)
<ul class="navi">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Lawn Care</a></li>
<li><a href="">Tree & Shrub …Run Code Online (Sandbox Code Playgroud)