CODEWITHSUNDEEP
javascriptcsshtmlresponsive-design
wwwuser
wwwuser

Reputation: 6362

Responsive list and list items

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.

Upvotes: 1

Views: 3106

Answers (2)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 2

Smamatti
Smamatti

Reputation: 3931

Set the size (height) for the ul and use the overflow method to hide 'additional' elements. Or use CSS to set display option of children > 3.

I think the second solution is much cleaner.

Sample
http://jsfiddle.net/372sV/

ul {
    float: left
    width: 100%;
}
ul li+li+li+li {
    display: none;
}
li {
    float: left;
    width: 33%;
}

Upvotes: 0

Related Questions