В испытании на горизонтальное меню не могу сделать так, чтобы последний элемент списка простирался до правой границы списка.
Чтобы пройти задание я знаю два варианта:
-
Задать последнему элементу ширину непосредственно:
.main-menu li:last-child {
width: 130px;
}
Проблема в том, что текст меню может изменится и тогда, скорее всего, меню сломается: перелезет на следующую строку или не будет недоставать до границы родителя.
- Задать фон всему меню, но тогда при наведении на последний элемент будет некрасивый обрубок справа.
Пройти задание я, конечно, пройду, но удовлетворения не получу, т.к. смотреться это будет некрасиво. Если уходить от рамок задания тогда либо надо не на всю длину родителя делать меню, либо каким-то образом менять цвет всего меню при наведении на последний элемент. На второй вариант у меня нет идей, как это сделать.
Мой основной код:
html, body{
margin:0;
padding:0;
}
body{
width:430px;
min-height:280px;
padding:10px;
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.4;
background:#ecf0f1;
}
.main-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.main-menu li {
display: inline-block;
background-color: #2980B9;
margin: 0;
border-left: 2px solid #2C3E50;
margin-right: -5px;
}
.main-menu a {
display: block;
margin: 0;
color: #FFFFFF;
text-decoration: none;
padding: 10px 15px;
}
.main-menu .active a,
.main-menu a:hover{
background-color: #1ABC9C;
}