Question

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

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

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

Answer 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/

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

1 个答案: