Редактирование HTML кода
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="ex1"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Наши работы</a> </li> <li> <a href="#">Представительство в Москве</a> </li> </ul> <p><kbd>li {flex-grow: 0;}</kbd></p> </div> <div class="ex2"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Наши работы</a> </li> <li> <a href="#">Представительство в Москве</a> </li> </ul> <p><kbd>li {flex-grow: 1;}</kbd></p> </div> <div class="ex3"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Наши работы</a> </li> <li> <a href="#">Корзина</a> </li> </ul> <p><kbd>li:last-child {flex-grow: 1;}</kbd></p> </div>
Редактирование CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:500&subset=cyrillic'); * {box-sizing: border-box; margin: 0} ul { padding: 0; list-style: none; display: flex; background: #FCDED4; width: 800px; margin: 50px auto 10px; } a { text-decoration: none; font-size: 18px; font-family: 'Montserrat', sans-serif; display: block; white-space: nowrap; padding: 10px 30px; color: #231F21; } li { text-align: center; border-right: 2px solid; margin: 4px 0; } li:first-child { border-left: 2px solid; } p { text-align: left; margin-bottom: 40px; } .ex2 li { flex-grow: 1; } .ex3 li:last-child { flex-grow: 1; text-align: right; } .ex3 li:last-child a { display: inline-block; } .ex3 li:last-child a:before { content: "\f290"; font-family: FontAwesome; margin-right: 5px; }
Результат отображения браузером