HTML / CSS List creation in rows, 3 cells per row?

Question

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

Suppose each block has a width of 150px , so the total width for the row is 450px . I try to make the list automatically allow only 3 fields (list items) in each line, and not force them to go under each other.

I tried something, not just asking before trying!

There is 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 )}

It doesn’t work as I wanted, why?

Is there a plugin for him that makes life easier?

Answer 1

You do not need to set UL to display as an embedded object. Instead, do the following:

 .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/