gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:27:38 24 4
gpt4 key购买 nike

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

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

我可能会向右浮动最后一项,但实际情况是导航项的事件状态因此会突出显示间隙,因为事件列表项的顶部应用了边框。这将显示差距。

最佳答案

将其视为表格:

<!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 - 水平导航列表项以填充所有可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5921960/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com