How to adaptively align list items?

A

Anton Chernyshev2020-12-27 19:08:23

css

Anton Chernyshev, 2020-12-27 19:08:23

It is necessary to distribute the elements of the list evenly over the header.
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>

Thank you!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Kirill Mager, 2020-12-28
@magerrrr

We make the menu (class .list_none) a flex element and specify the justify-content property to it how to use the available space, by the way about the available space - it (in this case, the width of the element) must be specified in the menu class - .header_menu as 100% for example)
Other CSS values see justify -content properties at .

* {
    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;
}