CSS-水平导航列表项可填充所有可用空间 [英] CSS - horizontal navigation list items to fill all available space
本文介绍了CSS-水平导航列表项可填充所有可用空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用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-水平导航列表项可填充所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
