HTML/CSS 使列表成行，每行 3 个框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18368028/
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
HTML/CSS Making a list be in rows, 3 boxes per row?
提问by Jony Kale
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
Let's say each box is 150pxwide, so total width per row is 450px.
What I am trying to do is, automatically make the list allow only 3 boxes (list elements) per row, and not make it go under each other.
假设每个框都很150px宽，因此每行的总宽度为450px. 我想要做的是，自动使列表每行只允许 3 个框（列表元素），而不是使其相互下方。
I've tried something, and not just asking before trying!
我已经尝试过一些东西，而不仅仅是在尝试之前询问！
There's my attempt:
这是我的尝试：
<div class="container">
<ul>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
</ul>
</div>
.container {
width: 450px;
}
.container ul li {
width: 150px;
height: 100px;
background-color: red;
float: left;
}
.container ul {
display: inline;
}
Result:
结果：
(source: gyazo.com)
（来源：gyazo.com）
It' doesn't function as I wanted, why?
它没有按我想要的方式运行，为什么？
Is there a plugin for it that makes life easier?
有没有插件可以让生活更轻松？
回答by Leonard
You don't need to set the UL to display as an inline object. Instead, do something like this:
您不需要将 UL 设置为显示为内联对象。相反，请执行以下操作：
.container {
width: 450px;
}
.container ul {
padding: 0; /* remove default padding and all margins! */
margin: 0;
list-style-type: none; /* remove the ? */
}
.container ul li {
width: 150px;
height: 100px;
background-color: red;
float: left;
}
Result: http://jsfiddle.net/f896G/
