HTML/CSS Tạo danh sách ở hàng, 3 ô mỗi hàng?

Question

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

Giả sử mỗi ô là 150px rộng, vì vậy tổng chiều rộng mỗi hàng là 450px. Những gì tôi đang cố gắng làm là, tự động làm cho danh sách chỉ cho phép 3 hộp (liệt kê các phần tử) mỗi hàng, và không làm cho nó đi theo nhau.

Tôi đã thử một cái gì đó và không chỉ hỏi trước khi thử!

Có cố gắng của tôi:

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

Kết quả:

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

Nó không hoạt động như tôi muốn, tại sao?

Có plugin nào giúp cuộc sống dễ dàng hơn không?

Answer 1

Bạn không cần đặt UL hiển thị dưới dạng đối tượng nội tuyến. Thay vào đó, làm một cái gì đó như thế này:

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

Kết quả: http://jsfiddle.net/f896G/