拉伸水平ul以适合div的宽度 [英] Stretch horizontal ul to fit width of div

问题描述

对于我的网站的主导航，有一个980像素宽的div与主导航链接的ul。我试图使导航链接拉伸以适应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>
</ul>
</div>

我正在做一些典型的css以使ul列表水平（float：left，display：block） 。我可以调整李的填充，以使它非常接近，但我真正需要的是一种方式，使其伸展自动适应。可能？

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?

编辑
难度1：无法使用表格。
难度2：每个nav项目将有不同的宽度，以适应更长和更短的链接名称。

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

推荐答案

这是最简单的方法：http://jsfiddle.net/thirtydot/jwJBd/

（或 table-layout：fixed

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

这个在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;
}

_{编辑前的旧答案：http://jsfiddle.net/thirtydot/DsqWr/}

这篇关于拉伸水平ul以适合div的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！