css make inline-block elements span the whole width of container

Question

OK so this is actually a little complicated.

I have a navigation list where the list items are set to inline-block. The number of items is the list is dynamic so may vary.

My aim is to have the list items span the whole width of the container. (e.g. if there were 4 list items each one would take up 25% of the container width [ignoring margin/padding etc])

There is the added complication that browsers seem to add a 4px margin to inline-block elements where there is whitespace between them (linebreak/space etc).

I have made a fiddle as a starting point which has 2 examples: the first is just the list items in inline-block mode which the 2nd justifies them accross the width.

Neither achieves what I want which is for the whole width to be taken up by the elements without them breaking onto another line.

http://jsfiddle.net/4K4cU/2/

edit: slightly separate but why in my 2nd example is there a space beneath the lis, dispite the fact I have set line-height and font-size to 0?

Answer 1

OK, despite many decent answers and my inital thinking that js/jquery was the only way to go there is in fact a good css-only solution: using table cells. Original suggestion by @Pumbaa80

.list {
    margin:0;
    padding: 0;
    list-style-type: none;
    display: table;
    table-layout: fixed;
    width:100%;
}
.list>li {
    display: table-cell;
    border:1px green solid;
    padding:5px;
    text-align: center;
}
.container {
    border: 1px #777 solid;
}

<div class="container">
    <ul class="list">
        <li>text</li>
        <li>text</li>
        <li>some longer text</li>
        <li>text</li>
    </ul>
</div>

This is superior to other solutions as:

• css-only
• no 4px margin problem as with inline-block
• no clearfix need for floated elements
• maintains equally distributed width independent of li content
• concise css

Fiddle here: http://jsfiddle.net/rQhfC/

Answer 2

It's now 2016 and I wanted to update this question with an answer using flexbox. Consult with CanIUse for browser-compatiblity.

/* Important styles */
ul {
  display: flex;
}
li {
  flex: 1 1 100%;
  text-align: center;
}

/* Optional demo styles */
* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 2em;
  justify-content: space-around;
  list-style: none;
  font-family: Verdana, sans-serif;
}
li {
  padding: 1em 0;
  align-items: center;
  background-color: cornflowerblue;
  color: #fff;
}
li:nth-child(even) {
  background-color: #9980FA;
}

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Pre-edit fiddle (now inlined in above snippet)

Answer 3

Here is one way of modifying your original concept.

The CSS is:

.list {
    padding:0;
    margin:0;
    list-style-type:0;
    overflow: hidden;
    height: 42px;
}
.list li {
    display: inline-block;
    line-height: 40px;
    padding: 0 5px;
    border:1px green solid;
    margin:0;
    text-align:center;
}

On your parent container, .list, set a height to enclose the child elements. In this case, I chose 40px and added 2px to account for the border.

Also, set overflow: hidden on .list to hide the 2nd line generated by the pseudo-element.

On the li elements, set line-height: 40px which will center the text vertically.

Since the height is fixed, the second line gets hidden and you can style your parent with a border and so on without extra white space breaking the design.

Demo: http://jsfiddle.net/audetwebdesign/WaRZT/

Not Foolproof...

In some cases, you may have more links than can fit on a single line. In that case, the items could force a second row to form and because of overflow hidden, you would not see them.

Evenly Spaced Border Boxes

If you want the border boxes to be evenly distributed, you need to set a width to the li elements.

If the content comes from a CMS, and you have some control over the coding, you can dynamically generate a class name to set the correct width using predefined CSS rules, for example:

.row-of-4 .list li { width: 24%; }
.row-of-5 .list li { width: 19%; }
.row-of-6 .list li { width: 16%; }

See: http://jsfiddle.net/audetwebdesign/WaRZT/3/

Answer 4

There are multiple fixes to this. The one I prefer is simply to remove the whitespace between the elements, simply because the font-size trick involves non-semantic CSS. And its a lot easier haha. Code because answer requires it:

<ul class="list">
    <li>
        text
    </li><li>
        text
    </li><li>
        text
    </li><li>
        text
    </li>
</ul>

Updated jsFiddle, where the first list has items set to width:25%; and fits in the window on one line. If this isn't what you were going for, I must have misunderstood.

EDIT: for unknown number of list items

There is some CSS3 stuff for this, but to be cross-browser compatible back to IE8, you want a JS solution. Something like this should work:

var listItems =  document.querySelectorAll('li');
listItems.style.width = listItems.parentNode.style.width / listItems.length;

SECOND EDIT: for jQuery instead of JS

Winging it, but:

var $listitems = $('.list').children();
$listitems.width($listitems.parent().width()/$listitems.length);

Answer 5

you can use the display:inline-block with li element,and use the text-align:justify with ul element. If you are interested ,please click here.