Имеется пример списка:
Как правильно записать стили, чтобы сделать горизонтальное меню?
Просто есть вариант с 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, сделал без отступов.
Комментариев нет:
Отправить комментарий