HTML/CSS Parent-child не получает полную ширину

Я все еще новичок в макете HTML/ CSS, но я пытаюсь установить ширину синей навигационной панели, чтобы покрыть всю мою область контейнера / родителя. Как вы видите, у меня есть и право 100px? пробел.. я хочу покрыть это со мной панель навигации. Можете ли вы проверить код и помочь мне написать его правильно? кажется относительное положение не будет работать. спасибо Смотрите картинку ниже

body, html
{
 margin: 0;
 padding: 0;
}
*
{
 box-sizing: content-box;
 padding: 0;
 margin: 0;
  color:#FFF;
}

.content
{
 width: 80%;
 background-color: red;
 height: 400px;
 text-align: center;
 margin: 0 auto; 
}
nav
{
 font-size: 0;
 
}

nav .menu li

{
 list-style-type: none;
 display: inline-block;
 
}

nav .menu li a

{
 text-decoration: none;
 font-size: 20px;
 background-color: blue;
 padding: 20px;
    display: table-cell;
    width: 250px;
    height: 25px;
   
  

}

nav .menu li a:hover
{
 background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
 <meta charset="UTF-8">
 <title>Website</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
 <nav>
  <ul class="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
  </ul>
 </nav>
</div>

</body>
</html>

Источник

2 ответа

В качестве альтернативного метода вы можете рассмотреть CSS Flexbox.
Вот удобное руководство.

Определяющим аспектом гибкого макета является возможность изменять ширину и / или высоту его элементов, чтобы они наилучшим образом помещались в доступное пространство на любом устройстве отображения. Гибкий контейнер расширяет элементы, чтобы заполнить доступное свободное пространство, или сжимает их, чтобы предотвратить переполнение... Макет блока смещен по вертикали; встроенный макет смещен по горизонтали. Макет Flexbox позволяет либо.

Ниже я повернул ваш <ul> элемент в гибкий контейнер коробки, так что все дочерние элементы вместе заполняют горизонтальное пространство. Я позволил пунктам меню переноситься на несколько строк при необходимости. Я также установил ваш <a> элементы, которые будут display:block так что каждый заполняет ширину своего родителя <li>,

.content {
  width: 80%;
  height: 400px;
  background-color: red;
  margin: 0 auto;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.menu li {
  flex-grow: 1;
}

.menu li a {
  display: block;
  font-size: 20px;
  background-color: blue;
  padding: 20px;
  height: 25px;
  color: white;
  text-decoration: none;
  text-align: center;
}

.menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

Обратите внимание на совместимость браузера с Flexbox.

Вы также можете использовать display:table-cell метод, который вы начали применять. Точно так же ключ устанавливает <a> элементы к display:block поэтому их фоны покрывают ширину их родителей.

.content {
  width: 80%;
  background-color: red;
  height: 400px;
  text-align: center;
  margin: 0 auto;
}

.menu {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.menu li {
  display: table-cell;
}

.menu li a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding: 20px;
  height: 25px;
  background-color: blue;
  color: white;
}
.menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

Но самое простое решение может быть перенести синий цвет фона с вашего <a> элементы к <ul> или же <nav> элемент:

.content {
  width: 80%;
  background-color: red;
  height: 400px;
  margin: 0 auto;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: blue;
  font-size: 0;
  text-align: center;
}

.menu li {
  display: inline-block;
}

nav .menu li a {
  display: block;
  text-decoration: none;
  font-size: 20px;
  padding: 20px;
  height: 25px;
  color: white;
}

nav .menu li a:hover {
  background-color: yellow;
  color: black;
}
<div class="content">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</div>

Источник

Я исправил ваш код, теперь навигация должна охватывать всю ширину. Добро пожаловать в стек переполнения!

https://jsfiddle.net/ofbnaks7/1/

я добавил position: relative; width: 100%; гарантируя, что каждый элемент списка охватывает ширину списка, его родителя. Далее, поскольку у вас есть якоря внутри элементов списка, я установил display: block; width: 100%; чтобы убедиться, что они отображаются в правильном месте и заполнить ширину своего родителя. Также я добавил box-sizing: border-box; к якорям. Поскольку у вас есть отступы на якорях, это означает, что заполнение будет "внутри" шириной 100%, а не снаружи, если это имеет смысл.

Источник
Другие вопросы по тегам