Имеется пример списка:
Как правильно записать стили, чтобы сделать горизонтальное меню?
Просто есть вариант с float: left;, displat: inline; итп. Хочу увидеть, как делают это профессионалы.
UPD: при li > display: inline-block; у li появляются боковые отступы, которые никак не могу убрать, а чем проблема?
Ответ
Пример с flexbox
* {
margin: 0;
padding: 0;
}
body {
font-family: Monospace;
font-size: 1.3rem;
}
.container {
padding: 0 0.9375rem;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: white;
}
.navbar {
background-color: crimson;
}
.navbar ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.navbar ul li {
padding: 1rem;
background-color: black;
}
Пример с flow-root & float: left
* {
margin: 0;
padding: 0;
}
body {
font-family: Monospace;
font-size: 1.3rem;
}
.container {
padding: 0 0.9375rem;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: white;
}
.navbar {
background-color: crimson;
}
.navbar ul {
display: flow-root;
}
.navbar ul li {
padding: 1rem;
float: left;
background-color: black;
}
Upd: Выделил li, сделал без отступов.
Комментариев нет:
Отправить комментарий