8
<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 150px wide, 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.

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:

img
(source: gyazo.com)

It' doesn't function as I wanted, why?

Is there a plugin for it that makes life easier?

Community
  • 1
  • 1
Jony Kale
  • 979
  • 3
  • 15
  • 35
  • you need to create the space for your boxes to sit hidden. Set the ul to have the width of all the items and the container to have 450px width, overflow hidden. It will only show your three and keep the li's sitting in a line. In your final code you can calculate the container width dynamically if the amount of boxes will be changing. – Shan Robertson Aug 21 '13 at 21:34

1 Answers1

16

You don't need to set the UL to display as an inline object. Instead, do something like this:

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

Leonard
  • 3,012
  • 2
  • 31
  • 52