<li> adapted width elements

Question

I am wondering if this can be done in CSS, without javascript:

List of N <li> elements with inline display equal to the width and the width of all equal to the width of the container

I can have 3 <li> elements, in this case the <li> width will be 33%, or I can have 4 <li> , then the li width will be 25%.

Answer 1

Possible with CSS3 flex boxes as shown in this script (web browsers only). There are other custom browser properties that will make this work for the latest versions of Firefox and IE. If you need something that works for Opera or older versions of IE, then there is a JavaScript library called Flexie that can work.

Confirm CSS3 Flexible Box Layout (flexbox) for browser support information.

HTML

 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> 

CSS

 ul { display:-webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack:justify; width:200px; } li { -webkit-box-flex:1; border:1px dashed grey; text-align:center; } 

Answer 2

This is a great example of using display: table . Works in modern browsers and IE8 + ...
Support table
Jsfiddle

CSS

 ul { display: table; width: 100%; table-layout: fixed; /* optional, for equal spacing */ border-collapse: collapse; } li { display: table-cell; text-align: center; vertical-align: middle; /* or similar, if needed */ } 

HTML:

 <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> 

Answer 3

You could with a limited number of possibilities. However, in CSS3 you cannot do this for an arbitrary number of columns. Perhaps you can in CSS4; I do not know yet.

 li { display: inline; } /* 1 column */ li:first-child:last-child { width: 100%; } /* 2 columns */ li:first-child:nth-last-child(2), li:nth-child(2):last-child { width: 50%; } /* 3 columns */ li:first-child:nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):last-child { width: 33.3333%; } /* 4 columns */ li:first-child:nth-last-child(4), li:nth-child(2):nth-last-child(3), li:nth-child(3):nth-last-child(2), li:nth-child(4):last-child { width: 25%; } 

I hope you get this idea. Do you want to do this? I hope no.

Answer 4

Assuming li generated from some server-side code, you can use the following trick:

 // in the markup add a class to the UL based on the count of messages <ul class="col<%= echo count(lis) %>"> ... // and in the CSS // (notice you have to use display: inline-block, as inline doesn't allow you to // specify a width) li { display: inline-block; } .col3 li { width: 33.3%; } .col4 li { width: 25%; } // etc 

Answer 5

Make a standard list with a left list, and you can (or should) set the mapping to a string to avoid IE6 doubling the possibly existing field on the left.

Assuming you have a static page, you can customize your list as follows:

HTML:

 <ul class="listLR col3 clearfix"> <li></li> <li></li> <li></li> </ul> 

and CSS:

 listLR { width: 100%; // important for IE! } listLR > li { display: inline; float: left; } col3 > li { width: 33.33%; } col4 > li { width: 25%; } //and so on 

Using the clearfix class is demonstrated here.