Как сделать так, чтобы текст HTML охватывал 100% от начала до конца

Question

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

Структура очень проста:

ul {
    display: flex;
    justify-content: center;
    width: 100%;
}
ul li {
    display: inline-block;
    text-align: center;
    flex: 1;
    justify-content: space-between;
}
ul li a {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    color: #070707;
}

<ul>
    <li><a href="">Contact us</a></li>
    <li><a href="">Delivery</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Terms &amp; Conditions</a></li>
    <li><a href="">Returns</a></li>
</ul>

Это работает, но, поскольку текст центрирован внутри каждого элемента li, слева и справа есть некоторое пространство. Я пытаюсь сделать так, чтобы текст «касался» краев элемента ul (который занимает 100% ширины родительского элемента). Поэтому, если элемент ul имеет ширину 1240 пикселей, я пытаюсь сделать так, чтобы текст занимал 1240 пикселей от начала до конца.

Вот как это выглядит, когда я делал макет страницы в фотошопе:

синие линии - это края (одна указывает на середину).

Когда я использую код flexbox, который я написал, он появляетсякак это:

Есть ли способ заставить это выглядеть так, как я изначально этого хотел?

Answer 1

Сохраните код флексбокса и используйте justify-content: space-between;, чтобы ваши предметы были такими:

Только не забудьте убедитьсяВаше направление flexbox установлено на «row».

Просто дополнительный совет: Поскольку вы делаете панель навигации, не забудьте использовать тег <nav> для улучшения семантики html и доступности. http://html5doctor.com/nav-element/

Answer 2

CSS в этом коде andbox возвращает то, что вам нужно (он использует React, но для CSS: https://codesandbox.io/s/wandering-sound-1cme5

Ключевые моменты, которые я вижу:

• setting *Поля 1007 * равны 0. Как правило, для обеспечения согласованного стиля в разных браузерах вы можете использовать инструмент нормализации, например, такой: https://necolas.github.io/normalize.css/, или полный сброс, например: https://meyerweb.com/eric/tools/css/reset/чтобы позаботиться об этом типе базовых стилей.
• удаление text-align: center. Они не нужны, если вы используете justify-content: space-between
• , используйте только justify-content: space-between в flex-обертке (ul)
• сбросьте заполнение по умолчанию ul, установив padding-left: 0
• Стили в li в основном не нужны, на самом деле, и только list-style: none; должны быть необходимы для вашегоцель.

Answer 3

Удалить flex: 1 из li. Вы не хотите, чтобы элементы росли, поскольку это не даст тексту достичь конечностей.

Добавьте justify-content: space-between; к ul. В настоящее время вы центрируете элементы, что приведет к их объединению.

Вам также необходимо удалить заполнение ul по умолчанию, но, по-видимому, вы уже это делаете.

body {
    outline: 1px dashed lightBlue;
}

ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}
ul li {
    display: inline-block;
    outline: 1px solid orange;
}
ul li a {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 300;
    color: #070707;
}

<ul>
    <li><a href="">Contact us</a></li>
    <li><a href="">Delivery</a></li>
    <li><a href="">About us</a></li>
    <li><a href="">Terms &amp; Conditions</a></li>
    <li><a href="">Returns</a></li>
</ul>

Answer 4

Элементы списка имеют отступы, чтобы освободить место для маркеров.

ul {
  display: flex;
}

ul li {
  text-align: center;
  flex: 1;
}

ul li a {
  font-size: 16px;
  font-weight: 300;
  color: #070707;
}

<ul>
  <li><a href="">Contact us</a></li>
  <li><a href="">Delivery</a></li>
  <li><a href="">About us</a></li>
  <li><a href="">Terms &amp; Conditions</a></li>
  <li><a href="">Returns</a></li>
</ul>

Удалите пространство по умолчанию для элементов списка. (Кроме того, большая часть вашего кода не нужна.)

ul {
  display: flex;

  /* new */
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  flex: 1;
  
  /* for demo */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed black;

}

ul li a {
  font-size: 16px;
  font-weight: 300;
  color: #070707;
}

<ul>
  <li><a href="">Contact us</a></li>
  <li><a href="">Delivery</a></li>
  <li><a href="">About us</a></li>
  <li><a href="">Terms &amp; Conditions</a></li>
  <li><a href="">Returns</a></li>
</ul>

Еще лучше очистить HTML-код. Избавьтесь от элементов списка и используйте более простой и семантически ценный элемент nav.

nav {
  display: flex;
}

a {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #070707;
  border: 1px dashed black;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

<nav>
  <a href="">Contact us</a>
  <a href="">Delivery</a>
  <a href="">About us</a>
  <a href="">Terms &amp; Conditions</a>
  <a href="">Returns</a>
</nav>