elements with adapted width

I'm wondering if it is possible to do this in CSS, without javascript:

A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container

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

It is possible with CSS3 flex boxes, as demonstrated in this fiddle (for webkit browsers only). There are other browser custom properties that would make this work for recent 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 which might work.

Credit to The CSS3 Flexible Box Layout (flexbox) for the information on the browser support.

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;
}

This is a perfect example for usage of display: table. Works in modern browsers and IE8+...
Support chart
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>

You could, with a limited number of possibilities. In CSS3 you can't do it for an arbitrary number of columns, though. You may be able to in CSS4; I don't 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 the idea. Do you want to do this? I hope not.

Assuming the lis are 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

Make a standard left-floated list and you can (or must) set display to inline to avoid IE6 doubling a possibly existing margin-left.

Assuming you have a static page, you can set your list up like this:

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

The use of a clearfix-class is demonstrated here

来源：https://stackoverflow.com/questions/8190198/li-elements-with-adapted-width

标签

css

width

html-lists

<li> elements with adapted width

HTML

CSS