CSS - 水平导航列表项填充所有可用的spce | 水平导航列表项填充所有可用的spce

本文介绍了CSS - 水平导航列表项填充所有可用的spce的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Using CSS how is it possible to have a horizontal list and have all list items to fill the available width of the parent space.

我将浮动li的左然后对每个应用一些填充，但我似乎不能得到全宽填充。因此在右手边留下一个缺口。

I am floating the li's left and then applying some padding to each but I cannot seem to get the full width filled. Thus leaving a gap on the right hand side.

我可以浮动最后一个项目，但是会发生什么，导航项目的活动状态将突出差距因为有一个边框应用于活动列表项的顶部。

I could potentially float the last item right but what happens is that the active state of the navigation items would therefore highlight the gap as there is a border applied to the top of the active list item. This would show the gap.

推荐答案

将其视为表格：

<!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>

这篇关于CSS - 水平导航列表项填充所有可用的spce的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！