css - Разтегнете хоризонтален ul, за да пасне на ширината на 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.

За основната навигация на моя сайт има 980px широк div с ul за главните навигационни връзки. Опитвам се да направя навикови връзки да се разтягат, за да пасват равномерно на ширината на div. <div...

Това е резюмето след превода, ако трябва да видите пълния превод, моля, щракнете върху иконата „превод“

Всички отговори
  • 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.