Задать вопрос
@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>

Спасибо!
  • Вопрос задан
  • 83 просмотра
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;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аналитика разработки мобильного приложения
20 нояб. 2024, в 16:19
1000 руб./в час
Починить смену почты в обработке входящих аккаунтов - C# .Net
20 нояб. 2024, в 16:02
25000 руб./за проект
Требуется сверстать на Wordpress несколько страниц
20 нояб. 2024, в 15:48
1000 руб./в час
Ещё заказы