CSS - 水平导航列表项以填充所有可用空间答案

【问题标题】：CSS - horizontal navigation list items to fill all available spaceCSS - 水平导航列表项以填充所有可用空间
【发布时间】：2011-05-07 15:19:11
【问题描述】：

使用 CSS 如何有一个水平列表并让所有列表项填充父空间的可用宽度。

我将 li 的左侧浮动，然后对每个应用一些填充，但我似乎无法填充整个宽度。因此在右手边留下了一个空隙。

我可能会将最后一项浮动到右侧，但会发生导航项的活动状态会因此突出显示间隙，因为活动列表项的顶部应用了边框。这将显示差距。

【问题讨论】：

嗯？您如何执行此操作的代码示例？如果浮动，则必须指定宽度。浮动元素不知道宽度：100%;

标签： css

【解决方案1】：

把它当作桌子：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <style>
        nav {width: 500px;}
        nav ul {
            list-style: none;
            margin:0;
            padding:0;
            display: table;
            background: red;
            width: 100%;
        }
        nav li {
            z-index:10;
            text-align: center;
            display: table-cell;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px 0;
            height: 20px;
            line-height: 20px;
            display: block;
            text-align: center;
            background: blue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">ipsum</a></li>
            <li><a href="#">dolor</a></li>
            <li><a href="#">sit</a></li>
            <li><a href="#">amet</a></li>
        </ul>
    </nav>
</body>
</html>

http://jsfiddle.net/SURzu/

【讨论】：

我已经尝试过没有用的方法 - 我仍然有那个差距。主要问题是不同的菜单项可以有不同的文本长度，所以我不能给每一个宽度。
@David，我编辑了帖子给你完整的例子。祝你好运。
不幸的是，table-cell 不适用于需要父 LI 是相对的下拉菜单。