@anton206060
начинающий программист

Как адаптивно выровнять элементы списка?

Нужно распределить элементы списка равномерно по шапке.
Css:
* {
    margin: 0;
    padding: 0;
}

body {
    background: #783c11;
}

.header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background: #fcf3e3;
    display: flex;
    align-items: center;
}

.header_logo {
    height: 100px;
}

.header_menu {
    margin-left: 25px;
}

.list_none {
    list-style: none;
}

.menu_item {
    display: inline-block;
    margin-left: 7%;
}

.link {
    text-decoration: none;
    color: #000;
    font-size: 30px;
}

HTML:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="header">
    <img class="header_logo"src="img/logo.png">
    <nav class="header_menu">
        <ul class="list_none">
            <li class="menu_item"><a class="link" href="#">О нас</a></li>
            <li class="menu_item"><a class="link" href="#">Десерты</a></li>
            <li class="menu_item"><a class="link" href="#">Контакты</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

Спасибо!
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
magerrrr
@magerrrr
JS Software Engineer
Делаем меню (класс .list_none) flex элементом и указываем ему свойство justify-content как использовать доступное пространство, кстати о доступном пространстве - его (в данном случае ширину элемента) надо указать в классе меню - .header_menu как 100% например)

Другие значения CSS свойства justify-content смотри по ссылке.
* {
    margin: 0;
    padding: 0;
}

body {
    background: #783c11;
}

.header {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background: #fcf3e3;
    display: flex;
    align-items: center;
}

.header_logo {
    height: 100px;
}

.header_menu {
    margin-left: 25px;
    width: 100%;
}

.list_none {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.menu_item {
    margin-left: 7%;
}

.link {
    text-decoration: none;
    color: #000;
    font-size: 30px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы