Question

How do I make an unknown number of list items be responsive in the browser? For example, I have a one row list and would like to have 3 li elements visible at all times. As I resize the browser window, the li elements scale so there are only 3 visible.

html:

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
  </ul>

css:

ul {float: left}
li {float: left; max-width: 33%}

I’d prefer a cross-browser method using only CSS. If javascript is necessary, then so be it. How do I achieve this in a responsive way for the web?

Any help is appreciated! Thanks.

Answer 1

You can do it with display:table property. Write like this:

CSS

li {
    display:table-cell;
    background:red;
    border:1px solid green;
}

Check this http://jsfiddle.net/372sV/1/