Блог

У меня есть чистая веб-страница в формате HTML / CSS. Я создал выпадающее меню, но не могу установить его на полную ширину.

Вот его кодовое описание.

https://codepen.io/SynergyOfLife/pen/ExyZdZz

Я использую Bootstrap 4.5.2.

Мой .header div не заполняет 100% ширины, что бы я ни пытался. Я хочу, чтобы он заполнял 100%, с текстом примера под ним.

Помощь была бы признательна, спасибо.

Добавьте цвет фона в заголовок вместо li. Затем удалите float из li и замените его на display inline-block . Вы также можете использовать гибкое отображение на ul.

Причина, по которой вы не смогли решить эту проблему, заключалась в том, что вы устанавливали float:left для <ui> элемента, который заставляет ваш контейнер пользовательского интерфейса перемещаться влево, ограничивая его, чтобы он занимал всю ширину страницы.

Решаемая

Я исправил CSS так, как вы хотите

Предлагаемый CSS

 .header{
  width:100%;
}
.header .main-navigation ul:nth-child(1){
  display:flex;
  width:100%;
  justify-content:center;
  background-color: red;
}
.header .main-navigation ul li {
  padding: 20px 0;
  background-color: red;
}
.header .main-navigation ul li a {
  padding: 0 20px;
}

.header .main-navigation ul li ul {
  position: absolute;
  margin-top: 10px;
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.header .main-navigation ul li:hover ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -10px);
}

.header .main-navigation ul li ul li {
  clear: left;
  padding-left: 10px;
  width: 180px;
}
  

Результат

Также, если вы хотите <li> , чтобы элементы, то есть параметры меню, отображались слева, вы можете просто изменить значение justify-content на flex-start вместо center .

Скажите мне, хотели ли вы того же или нет 🙂