CSS css水平导航间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/276324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css horizontal navigation spacing
提问by
I'm trying to create a horizontal navigation bar in css with 5 evenly spaced links. The html hopefully will remain like this:
我正在尝试用 5 个均匀间隔的链接在 css 中创建一个水平导航栏。希望 html 将保持这样：
<div id="footer">
<ul>
<li><a href="one.html">One</a></li>
<li><a href="two.html">Two</a></li>
<li><a href="three.html">Three</a></li>
<li><a href="four.html">Four</a></li>
<li><a href="five.html">Five</a></li>
</ul>
</div>
So with CSS, I want to space them evenly within the footer div. So far I'm using this:
所以使用 CSS，我想在页脚 div 内均匀地间隔它们。到目前为止，我正在使用这个：
div#footer{
height:1.5em;
background-color:green;
clear:both;
padding-top:.5em;
font-size:1.5em;
width:800px;
}
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
display:inline-block;
text-align:center;
}
This works pretty well, but there is spacing between the li's that I do not want. That is why I've used the 155px instead of 160px for their width, there is about 5px of space being put in between each li. Where is that spacing coming from? How can I get rid of it? If I increase the fontsize, the spacing increases as well.
这很有效，但是我不想要的 li 之间有间距。这就是为什么我使用 155px 而不是 160px 作为它们的宽度，每个 li 之间有大约 5px 的空间。那个间距从哪里来？我怎样才能摆脱它？如果我增加字体大小，间距也会增加。
采纳答案by Andrew G. Johnson
I've had this happen to me. Unfortunately it is caused by the browser taking the line breaks between the list items and rendering them as spaces. To fix, change your HTML to:
我就遇到过这种情况。不幸的是，这是由浏览器在列表项之间换行并将它们呈现为空格引起的。要修复，请将您的 HTML 更改为：
<div id="footer">
<ul>
<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
</ul>
</div>
回答by mercutio
If you use this:
如果你使用这个：
div#footer li{
width:160px;
display:block;
float: left;
text-align:center;
}
It all looks lovely :D
这一切看起来都很可爱：D
回答by vincent
The spaces between your <li>elements are due to the whitespaces and carriage returns between them, due to the inline style. If you write :
<li>由于内联样式，元素之间的空格是由于它们之间的空格和回车。如果你写：
<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
You'll see no more space between them.
您将看不到它们之间的空间。
I'm not sure if inline-block's will display nicely on IE6, so you may want to try the float approach.
我不确定 inline-block 是否会在 IE6 上很好地显示，因此您可能想尝试浮动方法。
回答by JeremyTM
This has been completely solved by CSS flexbox.
CSS flexbox 已经完全解决了这个问题。
CSS-Tricks have an excellent writeup here, and a Codepen example using <ul>here.
CSS-Tricks在这里有一篇优秀的文章，还有一个使用<ul>这里的 Codepen 示例。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
margin: 0px;
line-height: 40px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1 1 auto;
}<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>I realise this is quite old, but I encountered this issue 7 years later in 2015 so this might help someone else too.
我意识到这已经很老了，但是我在 7 年后的 2015 年遇到了这个问题，所以这也可能对其他人有所帮助。
回答by JeremyTM
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
float:left;
display:block;
}
This code positioned li horizontally while the spaces between them. If you want to adding space between li elements:
此代码将 li 水平放置，而它们之间有空格。如果要在 li 元素之间添加空格：
div#footer li{
width:155px;
margin-right: 5px; //5px Space between li elements
float:left;
display:block;
}
