css - Esticar ul horizontal para ajustar a largura da div

original title: "css - Stretch horizontal ul to fit width of div"


For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.

Para a navegação principal do meu site, há uma div de 980px de largura com uma ul para os principais links de navegação. Eu estou tentando fazer com que os links de navegação se estendam para ajustar a largura da div uniformemente. <div...

Este é o resumo após a tradução, se você precisar ver a tradução completa, clique no ícone 'traduzir'

Todas as respostas
  • Translate

    This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

    (or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

    This won't work in IE7.

    #horizontal-style {
        display: table;
        width: 100%;
        /*table-layout: fixed;*/
    #horizontal-style li {
        display: table-cell;
    #horizontal-style a {
        display: block;
        border: 1px solid red;
        text-align: center;
        margin: 0 5px;
        background: #999;

    Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/

  • Translate

    People hate on tables for non-tabular data, but what you're asking for is exactly what tables are good at. <table width="100%">

  • Translate

    inelegant (but effective) way: use percentages

    #horizontal-style {
        width: 100%;
    li {
        width: 20%;

    This only works with the 5 <li> example. For more or less, modify your percentage accordingly. If you have other <li>s on your page, you can always assign these particular ones a class of "menu-li" so that only they are affected.