заполните всю ширину div - меню

#html #css

Вопрос:

Вот мой код:

 .row {
  width: 800px;
}

.menu {
  display: inline-block;
  display: flex;
  list-style: none;
  padding: 0;
}

li {
  width: 100%;
}

.test {
  width: 800px;
  background-color: red;
}

 <div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>amp;nbsp;</p>
</div>

Я хочу, чтобы меню заполняло всю ширину div. Расстояния одинаковы, и элементы должны совпадать с краями теста div.

Вот как это будет выглядеть:

Тест

С Наилучшими Пожеланиями и Спасибо Вам

Ответ №1:

justify-content это то, что вы, вероятно, ищете : смотрите https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content

Это определяет выравнивание вдоль главной оси. Это помогает распределить дополнительное свободное пространство, оставшееся, когда либо все гибкие элементы в строке являются негибкими, либо являются гибкими, но достигли своего максимального размера. Он также обеспечивает некоторый контроль над выравниванием элементов, когда они переполняют строку.

ДЕМОНСТРАЦИЯ

 .row {
  width: 800px;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content:space-between;
}


.test {
  width: 800px;
  background-color: red;
}

 <div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>amp;nbsp;</p>
</div>

Ответ №2:

 .row {
  width: 800px;
  overflow-x: hidden;
}

.menu {
  display: inline-block;
  display: flex;
  list-style: none;
  width: 100%;
  padding: 0;
}

li {
  width: 100%;
  text-align: center;
}

.test {
  width: 100%;
  background-color: red;
}

 <div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
  <div class="test">
     <p>amp;nbsp;</p>
  </div>
</div>

Попробуйте это😊

Ответ №3:

 .menu {
  display: inline-block;
  display: flex;
  list-style: none;
  padding: 0;
  width: 100%;
}

Это должно решить вашу проблему

Ответ №4:

display: flex; и justify-content: space-between; доставлю тебя туда.

Я также добавил:

 * {
  margin: 0;
  padding: 0;
}

Я также удалил (прокомментировал):

 li {
      width: 100%;
    }

чтобы избавиться от полей и отступов по умолчанию на body элементе.

 * {
  margin: 0;
  padding: 0;
}

.row {
  width: 800px;
}

.menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

/*
li {
  width: 100%;
}
*/

.test {
  width: 800px;
  background-color: red;
}

 <div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>amp;nbsp;</p>
</div>

Ответ №5:

Вам нужно лучше настроить свой flex. Вот решение

 * {
  margin: 0;
  padding: 0;
}

.row {
  width: 800px;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: stretch;
  justify-content: space-between;
}

.test {
  width: 800px;
  background-color: red;
}

 <div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>amp;nbsp;</p>
</div>