gpt4 book ai didi

html - ul 的 float 部分

转载 作者:太空宇宙 更新时间:2023-11-03 23:36:13 26 4
gpt4 key购买 nike

我有一个相当基本的问题。

我有一个带有 ul 和 7 lis 的页面,跨越页面的 100%。我想让最后三个 lis 向右浮动,我希望最后一个是不同的颜色。除非必要,否则我尽量不重新编码。

这是代码,我应该如何应用css?制作另一个 ul,(但它会与另一个保持一致)还是直接应用于 li?我可以制作一个特殊的 li 类,让最后三个放在不同的地方吗?

<html>
<head>
<style>
ul {
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a {
width:6em;
text-decoration:none;
color:white;
}

</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
<li><a href="#">Link six</a></li>
<li><a href="#">Link seven</a></li>
</ul>
</body>
</html>

最佳答案

您可以为此使用 :nth-child()css-tricks.com/how-nth-child-works

li:nth-child(5),
li:nth-child(6),
li:nth-child(7) {
text-align: right;
}

li:nth-child(7) a {
color: red;
}

例子: http://jsfiddle.net/skeurentjes/3RR8D/

关于html - ul 的 float 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24014324/

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