Испытание 20/28 100% и ничего лишнего

Курсы §13. Мастерская: создаём меню
1

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 {

padding: 0;
margin: 0;
background: #2980b9;

}

.main-menu li {
display: inline-block;
border-left: 2px solid #2c3e50;
margin-right: -5px;
}

.main-menu a {
color: #ffffff;
display: block;
padding: 10px 15px;
text-decoration: none;

}

.active a {
background-color: #1abc9c;

}

2 лайка
2

А я вот так написал тоже 100%

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{
padding:0;
margin:0;
background:#2980b9;
}
.main-menu li{
display:inline-block;
}
.main-menu a{
display:block;
color:white;
text-decoration:none;
margin-right:-5px;
border-left:2px solid #2c3e50;
padding:10px 15px;
}
.main-menu .active a{
background:#1abc9c;
}

3

это 96%, но я недовольна результатом. Помогите исправить, чтобы я для себя поняла, почему результат не тот:
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 li a {
color: white;
text-decoration: none;
margin:0;
padding: 10px 0px 10px 15px;
}
.main-menu li {
display:inline-block;
background-color: #2980b9;
border-left: 2px solid #2c3e50;
padding: 10px 0px 10px 15px;

width: 75px;

}
.main-menu .active {
background-color: #1abc9c;
}
.main-menu {
background: #2980b9;
margin: 0;
padding: 0;

}

4

Скрин с открытой вкладкой “Различия”, пожалуйста.

5

Инеска скажите пжл,
В чем разница, если (border-left: 2px solid #2c3e50;) вставить в строку или ссылку?
вот здесь в примере он в строке. А в примере 19/28 он в ссылке.
Я сделал задание как в 19/28 и оно дало из-за этого 96%

6

Для начала поясните, что вы имеете в виду под словом “строка” в данном случае?

7

.main-menu li - в данном примере строка
.main-menu a - ссылка

8

у меня 2 вопроса:

  1. такой же вопрос как и у serdjio24 по поводу: "В чем разница, если (border-left: 2px solid #2c3e50:wink: вставить в элемент списка или ссылку? вот здесь в примере он элементе списка. А в примере 19/28 он в ссылке. "
  2. Можно ли бы ло как-то обойтись без .main-menu li:last-child{
    width: 134px;
    }
    или как код лучше сделать?

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{
margin: 0;
padding:0;
list-style: none;
}

.main-menu li{
margin: 0;
padding:0;
Display: inline-block;
margin-right: -5px;
border-left: 2px solid #2C3E50;
}

.main-menu a{
background: #2980B9;
color: #ffffff;
text-decoration: none;
display: block;
padding: 10px 15px;
}

.main-menu .active a {
background-color: #1ABC9C;
}

.main-menu li:last-child{
width: 134px;
}

9
  1. Возможны оба варианта.
  2. Самый красивый вариант, если вы добавите синий фон для списка меню. Тогда последний пункт можно не удлинять.
1 лайк
10

У меня при таком же коде вышла непонятная проблема.
.main-menu {
list-style: none
margin: 0;
padding: 0;
Background: #2980b9;
}

.main-menu li {
    display: inline-block;
    margin-right: -5px;
    border-left: 2px solid #2c3e50;
    
}

.main-menu a {
    display: block;
    padding: 10px 15px;
    color:#ffffff;
    text-decoration: none;
 }

.main-menu .active a {
    background: #1abc9c;
}

Безымянный.jpeg766×688 52.2 KB

В чем проблема?

11

Знак “точка с запятой” пропущен, а значит следующее свойство не срабатывает.

1 лайк
12

спасибо, не заметила, хотя прошерстила весь код несколько раз)

13

Что-то я не пойму почему Вы обошлись без list-style: none; ?

Разве это правильно? И куда делись маркеры списка? Ваш код я повторил у себя, считаю его самым рациональным. Но вопросы остаются.