gpt4 book ai didi

Css 菜单项组彼此相邻

转载 作者:太空宇宙 更新时间:2023-11-04 03:12:15 25 4
gpt4 key购买 nike

我正在努力实现这一目标。

enter image description here

这是我的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>Full Time MBA</li>
<li>Part Time MBA</li>
<li>Executive MBA (EMBA)</li>
<li>Senior Executive MBA (SEMBA)</li>
<li>Master of Business Analytics</li>
<li>Master of Management Programs</li>
<li>Master of Internation Business </li>
<li>Specialist Masters</li>
<li>Research Higher Degrees</li>
<li>Executive Education</li>

</ul>
</body>
</html>

下面是我的CSS

ul{
list-style:none;
color:blue;
}
ul li:nth-child(n+6){
float:left;
margin-left:250px;
margin-top:0px;
color:green;
}
ul li:nth-last-child(-n+2){
color:red;

}

请帮忙。

最佳答案

column-count 属性可以帮助您:

ul {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}
ul li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
<ul>
<li>Full Time MBA</li>
<li>Part Time MBA</li>
<li>Executive MBA (EMBA)</li>
<li>Senior Executive MBA (SEMBA)</li>
<li>Master of Business Analytics</li>
<li>Master of Management Programs</li>
<li>Master of Internation Business</li>
<li>Specialist Masters</li>
<li>Research Higher Degrees</li>
<li>Executive Education</li>
</ul>

关于Css 菜单项组彼此相邻,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29337160/

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