Я создал меню, в котором есть 3 блока: логотип, панель навигации и панель справа. Я сделал их justify-content: space-around, чтобы логотип был справа, навигация по центру и правая панель справа. Также я сделал ссылки white-space: nowrap и добавил маржу: 0 10% (например), и мой li вышел из тега nav. Как я могу это исправить?

Ссылка на codepen: https://codepen.io/kartegi/pen/xxVzPLm?editors= 1100

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 80px;
  background: green;
}

a {
  white-space: nowrap;
  color: #fff;
}

nav {
  background: red;
}

.menu-list {
  display: flex;
  background: #000;
  margin: 0 2.5%;
}

li {
  margin: 0 10%;
}

.right-bar {
  display: flex;
}

.search {
  width: 20px;
  height: 20px;
  background: #000;
}

.language {
  width: 20px;
  height: 20px;
  background: #fff;
}
<div class="menu">
  <div class="logo">
    <a href="">Click me</a>
  </div>
  <nav class="navbar">
    <ul class="menu-list">
      <li><a href="#">About me</a></li>
      <li><a href="#">My compony</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="right-bar">
    <div class="search">
    </div>
    <div class="language">
    </div>
  </div>
</div>
0
ktennie 14 Сен 2020 в 15:05

3 ответа

Лучший ответ

Здесь вы можете увидеть li в своем списке ul. Просто добавьте "flex: 1 1 auto;" к вашему элементу .navbar, чтобы получить максимальную доступную ширину. Теперь вам нужно управлять шириной и интервалом элементов.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 80px;
  background: green;
}

a {
  white-space: nowrap;
  color: #fff;
}

nav {
  background: red;
}

.menu-list {
  display: flex;
  background: #000;
  margin: 0 2.5%;
}

li {
  margin: 0 10%;
}

.right-bar {
  display: flex;
}

.search {
  width: 20px;
  height: 20px;
  background: #000;
}

.language {
  width: 20px;
  height: 20px;
  background: #fff;
}
.navbar{
  flex: 1 1 auto;
}
<div class="menu">
  <div class="logo">
    <a href="">Click me</a>
  </div>
  <nav class="navbar">
    <ul class="menu-list">
      <li><a href="#">About me</a></li>
      <li><a href="#">My compony</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="right-bar">
    <div class="search">
    </div>
    <div class="language">
    </div>
  </div>
</div>
0
aflyzer 14 Сен 2020 в 12:25

Это то, что вы ищете?

Попробуйте flex-direction: column; на своем .menu-list

Или

flex-wrap: wrap;, чтобы обернуть элементы в пределах доступного пространства.

0
Becky 14 Сен 2020 в 12:23
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
}

.menu {
 
  display: flex;
  align-items: center;
  justify-content: space-around;
 
  
  height: 80px;
  background: green;
}

a {
  white-space: nowrap;
  color: #fff;
}

nav {
 background: #fff;
}

.menu-list {
  display:flex;
  align-items:space-between;
  background-color:black;
}

li a{
  padding:20px; // remove margin from li and give padding on anchor tag 
  
}

.right-bar {
  display: flex;
}

.search {
 
  height: 20px;
  background: #000;
}

.language {
 
  background: #fff;
}
0
Abdul Munim 14 Сен 2020 в 12:41