Css菜单项组彼此相邻

时间：2015-03-30 01:39:30

标签： css3

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

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;

}

请帮忙。

1 个答案:

答案 0 :(得分：2)

column-count属性可以帮助您：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题