Css группа элементов меню рядом друг с другом

Я пытаюсь достичь этого.Css группа элементов меню рядом друг с другом

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; 

}

Пожалуйста, помогите.

источник

2015-03-30 Vinay Joseph

Свойство 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>

источник

2015-03-30 03:20:07 kursus

Голосуйте за использованием колонки подсчета :) –

Css группа элементов меню рядом друг с другом

ответ

Смежные вопросы