带有 div 的 HTML/CSS 中的水平（内联）列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8437790/
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
Horizontal (inline) list in HTML/CSS with divs
提问by Ringo Blancke
I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:
我正在尝试构建一个简单的水平列表，其中每个列表项都是一个 div，我希望它们都并排放置。但是，当我尝试使用下面的代码时，div 最终出现在单独的行上。这是我所拥有的：
HTML:
HTML：
<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>
CSS:
CSS：
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.
我试图给我的 div 一个最大宽度和一个宽度，但这也不起作用。基本上，它们显示在单独的行上没有项目符号点。
Some help on fixing this would be very appreciated, thanks!!
非常感谢解决此问题的一些帮助，谢谢！
回答by Phrogz
#navlist li { display:inline }
#navlist div { display:inline }
Making the <li>inline while leaving the <div>as block is your problem.
<li>在离开<div>as 块的同时进行内联是您的问题。
Alternatively, you may want inline-blockfor the <li>if you are going to be controlling sizes or margins.
或者，你可能想inline-block的<li>，如果你将要控制规模或利润。
You may also be interested in this demo: http://phrogz.net/JS/ul2menu/purecss_testsuite.html
你可能也对这个演示感兴趣：http: //phrogz.net/JS/ul2menu/purecss_testsuite.html
I'm not sure why you have <div>inside your <li>, but I presume you have your reasons.
我不确定你为什么在你的<div>里面<li>，但我想你有你的理由。
回答by Dissident Rage
CSS
CSS
* {
margin: 0;
padding: 0;
}
ul {
background: #48D;
height: 35px;
line-height: 25px;
width: 300px;
}
li {
float: left;
list-style-type: none;
margin: 5px 0 0 5px;
}
li div {
background: #6AF;
padding: 0 5px;
}
HTML
HTML
<ul>
<li><div>Text</div></li>
<li><div>Text</div></li>
<li><div>Text</div></li>
</ul>
回答by Dennis Traub
Each div inside the list items is displayed as a block by default. Display them inline as well and it should work.
默认情况下，列表项中的每个 div 都显示为一个块。也可以内联显示它们，它应该可以工作。
#navlist div, #navlist li
{
display: inline;
}
#navlist li
{
list-style-type: none;
padding-right: 20px;
}
回答by allaire
Try float: left;on the list items, perhaps something like that:
尝试float: left;列表项，也许是这样的：
#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}
Also, make sure to specify a height to the ul because the elements will go out of the flow, meaning that the ul won't have any height. You can also use a clearfix to fix this behavior:
另外，请确保为 ul 指定高度，因为元素将离开流，这意味着 ul 不会有任何高度。您还可以使用 clearfix 来修复此行为：
.clear:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear
{
display: inline-block;
}
html[xmlns] .clear
{
display: block;
}
* html .clear
{
height: 1%;
}
You just add class="clear"to the <ul>. Google clearfix css for more infos :)
您只需添加class="clear"到<ul>. 谷歌 clearfix css 以获取更多信息:)
