CSS水平列表/导航，带有不需要的底部填充

试图消除导航项下的一些奇怪的底部填充，这是由

导航.span

样式引起的（正是这种样式使事情正常进行，所以我无法消除它）。我希望导航项目与顶部和底部齐平

我使用这种编码器的时间最长，我想这不是我第一次注意到填充物，就是我刚刚把它扫到地毯下面

在这里拉小提琴

快速查看下面的代码：

CSS

HTML

项目
项目
项目
项目
项目

删除

显示：内联块.navigation span

的code>不太确定您想要什么，但似乎是一种混合或遗留的不同方法。 因此，如果您想文本对齐，请删除所有关于浮动的内容。

一些建议如下：

---

我在你的浏览器中添加了另一个导航栏，其中包含了一些CSS类和标记，我想这会给它带来你想要的效果。（CSS如下）

显然，你应该在间距等方面进行调整

---

希望有帮助

对不起，为什么需要空的跨度？因为，如果你删除它，差距就会消失。你永远不应该仅仅为了样式而改变html的结构（特别是添加空元素）。样式是css的职责，应该与内容分开。所以我必须同意@AndrewGibson，你为什么需要跨度？把它拿走！老实说，我不是100%确定我为什么需要这个跨度。这都是我从某个地方获取的一段代码，满足了我的需要。我所知道的是，如果我从HTML中去掉span，nav项就不会进行完整的对齐。但是，它也不会进行完整的对齐谢谢@GCyrillus，这确实有效。只是为了内心的平静。。。“padding right:2700px”不是太黑，或者在什么地方弄坏了什么？（似乎没有，但只是想再次检查）。避免给出宽度：100%；wich似乎给出了元素1px的高度：）

/* NAVIGATION */

.navigation {
width:100%;
clear:both;
float:left;
text-align:justify;
padding:0;
margin:0;
}

.navigation * {
display: inline;
margin:0;
padding:0;
}

.navigation ul {
list-style-type: none; 
margin:0;
padding:0;
}

.navigation li {
font-family:Arial;
font-size:12px;
color:white;
background:black;
padding:5px;
margin:0px;
white-space:nowrap;
}

.navigation span {
display: inline-block;
position: relative;
width: 100%;
height:0;
margin:0;
padding:0;
}

    <div class="navigation">

        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>

        <span></span>

    </div><!--END navigation-->

/* NAVIGATION */

    .navigation {
    width:100%;
    text-align:justify;
    padding:0;
    margin:0;
    }

    .navigation ul {
    list-style-type: none; 
    margin:0;
    padding:0;
    line-height:0;
    }

    .navigation li {
    font-family:Arial;
    font-size:12px;
    color:white;
    background:black;
    padding:5px;
    margin:0px;
    display:inline-block;
    line-height:1.2em;
    }
.navigation ul:after {content:'';padding-right:2700px;}/* line-height 0 + this avoid gaps under , padding , use widest screen width you like*/

.test_nav{
   background:orange;   
}
.test_nav_bar{
   list-style-type: none;
}
.test_nav_bar li{
   display: inline-block;
   background: gray;
   margin-left:50px;
   padding: 5px;
}