显示内联 <li> 的问题水平导航栏的标签 [英] Issue with displaying inline <li> tags for horizontal nav bar
问题描述
我希望有人能帮助我告诉我为什么 li 标签没有显示在同一行上，并带有以下标记.我不是在争论我的标记是正确的，只是为什么它不起作用.
I am hoping someone can help advise me why the li tags don't display on the same line, with the following mark up. i'm not arguing that my markup is right, just why it doesnt work.
body {
width: 100%;
margin: 0 auto;
padding: 0 auto;
}
ul {
float: right;
border: 1px solid black;
width: 100%;
padding: 0;
}
ul li {
display: inline-block;
width: 20%;
border: 1px solid black;
text-align: center;
list-style-type: none;
}
ul li a {
display: block;
}<body>
<header>
<ul id="nav">
<li><a href="home">Home</a></li>
<li><a href="home">About Us</a></li>
<li><a href="home">Infomration</a></li>
<li><a href="home">Additional</a></li>
<li><a href="home">Contact</a></li>
</ul>
</header>
</body>我正在努力将我的头环绕起来，将宽度设置为 ul 为 100%，为什么然后将 5 li 标签的宽度设置为 20%，它只能在一行中容纳 4 个，推动剩余的li 标签在下面.
I'm struggling to wrap my head around, having set the width to the ul as 100%, why then setting the width of the 5 li tags to 20%, it can only fit 4 in a line, pushing the remaining li tag underneath.
我可以使用 display: table 等在一行上显示导航栏，但为什么上述方法不起作用?
I can get the nav bar on one line using the display: table etc, but why doesn't the above work?
如果我的问题表述有误，我深表歉意.
Apologies if I've laid my question out wrong.
谢谢.
推荐答案
你真的应该考虑创建 带有 flexbox 的水平导航栏.这里的问题是浏览器在 li 元素之间呈现不可见空间"，因为它们位于 html 文档的不同行上.你可以通过评论来解决这个问题:
You really should look into creating horizontal nav bars with flexbox. The issue here is that the browser is rendering "invisible space" between your li elements since they're on different lines of the html document. You can get around that with comments:
<ul id="nav">
<li><a href="home">Home</a></li><!--
--><li><a href="home">About Us</a></li><!--
--><li><a href="home">Infomration</a></li><!--
--><li><a href="home">Additional</a></li><!--
--><li><a href="home">Contact</a></li>
</ul>
这篇关于显示内联 <li> 的问题水平导航栏的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
