Блог

Главная - Вопросы по программированию - Я создавал горизонтальное меню и получил проблемный навигационный тег, который не может вместить все списки ul внутри себя

Я создавал горизонтальное меню и получил проблемный навигационный тег, который не может вместить все списки ul внутри себя

#html #css

#HTML #css

Вопрос:

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

Ссылка на 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>

Комментарии:

1. Вы можете добавить «flex: 1 1 auto;» к вашему элементу .navbar, чтобы получить максимальную доступную ширину. Вы также можете иметь ширину до . логотип и .правая панель для лучшего просмотра

Ответ №1:

Здесь вы можете увидеть, 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>

Ответ №2:

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

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

или

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

Ответ №3:

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