HTML/CSS使列表成行，每行3個框？

Question

<ul> 
    <li>item1</li> 
    <li>item1</li> 
    <li>item1</li> 
    <li>item1</li> 
    <li>item1</li> 
    <li>item1</li> 
</ul> 

假設每個方框的寬度爲150px，因此每行的總寬度爲450px。 我想要做的是自動讓列表只允許每行3個框（列表元素），而不是讓它在對方之下。

我已經嘗試了一些東西，而不僅僅是在嘗試之前詢問！

有我的嘗試：

<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; 
} 

結果：

img http://gyazo.com/fc8367ed762c25b29abb94a1e31e4da4.png

這是因爲我想不起作用，爲什麼呢？

有沒有插件讓生活變得更輕鬆？

Answer 1

您不需要將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; 
} 

結果：http://jsfiddle.net/f896G/