Question

I’m trying to get li elements in a ul to have equal width, and fit on one line, with CSS, without knowing how many lis there are when the CSSis made (i.e. dynamically generated HTML).

W3Schools has a navigation bar example, but it’s fixed-width, and if you add another li rather scaling to fit, the whole layout gets thrown off.

This is their example:

CSS:

ul
{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
li
{
  float:left;
}
a:link,a:visited
{
  display:block;
  width:120px;
  font-weight:bold;
  color:#FFFFFF;
  background-color:#98bf21;
  text-align:center;
  padding:4px;
  text-decoration:none;
  text-transform:uppercase;
}
a:hover,a:active
{
  background-color:#7A991A;
}

HTML:

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Ideally, I would be able to add another li and the menu would still display great.

Answer 1

Even thought I hate this solution… if you really need it to work with just HTML/CSS and auto-update width, a table would do the trick.

Otherwise I would recommend just having some simple JS updates the widths for you. If you are adding the extra options via JS it would be easy to toss this in.

EDIT: Actually, depending on your targeted browsers. You could use the display: table stuff but it is limited to IE8+.

DEMO