Задать вопрос
@anton206060
начинающий программист
html

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

Нужно распределить элементы списка равномерно по шапке.
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>

Спасибо!
  • Вопрос задан
  • 76 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 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;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы