Горизонтальное меню на всю ширину css: Меню на всю ширину блока с равным отступом · Блог веб-студии Keengo

Содержание

html — Как растянуть пункты меню по всей ширине родительского блока?

Вопрос задан

Изменён 1 год 6 месяцев назад

Просмотрен 13k раз

Есть обычная навигация:

HTML:

<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

CSS:

nav {
  font-size: 0;
    line-height: 0;
    letter-spacing: -1px;
}
nav li {
  display: inline-block;
}
nav a {
    display: block;
  background: #000;
    padding: 0 10px;
    font-size: 17px;
    line-height: normal;
    letter-spacing: normal;
  color: #fff;
}
nav li:nth-child(2n) a {
  background: #666;
}

Как пункты меню растянуть по всей ширине блока nav, чтобы padding у всех ссылок был одинаковым (пустого пространства между ссылками быть не должно, это пространство распределяется на внутренние отступы ссылок)?

UPD:

Изображение того, как должно отображаться меню.

  • html
  • jquery
  • css

Поставить display: flex родителю, flex-basis: auto + flex-grow: 1 — потомкам.

body,
ul {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
}

ul li {
  list-style-type: none;
  flex-basis: auto;
  flex-grow: 1;
  background: #000;
  text-align: center;
}

ul li:nth-child(2n) {
  background: #ccc;
}

ul li a {
  padding: 20px 0;
  text-decoration: none;
  color: #ccc;
  display: block;
}

ul li:nth-child(2n) a {
  color: #000;
}
<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

Вариант на Flexbox

body,
ul {
  margin: 0;
  padding: 0;
}

ul,
ul li,
ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

ul {
  text-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

ul li a {
  min-height: 70px;
  text-decoration: none;
  color: #333;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

ul li a:hover {
  background: #eee;
}
<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

4

А этот вариант не проще?

ul 
 text-align: justify!important;
    text-align-last: justify;

1

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Растянуть меню на всю ширину

Вот разметка:

. main_nav_wrapp {
  background-color: #004a9e;
}

.main_row {
  max-width: 1240px;
  margin: 0 auto;
}

.main_nav {
  display: flex;
  display: -webkit-flex;
  outline: 1px solid red;
}

.main_nav li {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  text-align: center;
}

.main_nav li a {
  display: block;
  flex: 1;
  -webkit-flex: 1;
  padding: 17px 38px;
  outline: 1px solid red;
}
<div>
  <div>
    <ul>
      <li><a href="#"><span>О компании</span></a></li>
      <li><a href="#"><span>Услуги</span></a></li>
      <li><a href="#"><span>Алгоритм работы</span></a></li>
      <li><a href="#"><span>Каталоги</span></a></li>
      <li><a href="#"><span>Полезная информация</span></a></li>
      <li><a href="#"><span>Медиа-центр</span></a></li>
      <li><a href="#"><span>Контакты</span></a></li>
    </ul>
  </div>
</div>

Получается вот так

На картинке видно что справа есть пустое место. Нужно чтобы все пункты меню растянулись по всей ширине меню так, чтобы между ними не было отступов. Как это сделать?

  • html
  • css
  • flexbox

2

Должного эффекта можно добиться с помощью свойства justify-content.

Для начала отмечу, что в данных стилях, которые ранее использовались для центрирования списка вкладок, надобности больше нет:

.main_row {
    max-width: 1240px;
    margin: 0 auto;
}

В принципе сам блок .main_row можно убрать, но тут уже на ваше усмотрение, может быть он вам нужен.

Теперь к сути. Я бы прибег к следующему варианту: justify-content: stretch для родителя (ul) и flex-grow: 1 для потомков (li).

Ваш пример с соответствующими изменениями:

.main_nav_wrapp {
  background-color: #004a9e;
}

.main_row {
  /* это больше не нужно */
  /* max-width: 1240px; */
  /* margin: 0 auto; */
}

.
main_nav { justify-content: stretch; // и раз display: flex; display: -webkit-flex; outline: 1px solid red; } .main_nav li { display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; text-align: center; flex-grow: 1; // и двас } .main_nav li a { display: block; flex: 1; -webkit-flex: 1; padding: 17px 38px; outline: 1px solid red; }
<div>
  <div>
    <ul>
      <li><a href="#"><span>О компании</span></a></li>
      <li><a href="#"><span>Услуги</span></a></li>
      <li><a href="#"><span>Алгоритм работы</span></a></li>
      <li><a href="#"><span>Каталоги</span></a></li>
      <li><a href="#"><span>Полезная информация</span></a></li>
      <li><a href="#"><span>Медиа-центр</span></a></li>
      <li><a href="#"><span>Контакты</span></a></li>
    </ul>
  </div>
</div>

flex-grow: 1 необходим для правильной работы stretch и является своего рода множителем определяющим насколько элемент больше своих соседей (попробуйте поставить flex-grow: 10 только первому li, посмотрите, что выйдет).

Также замечу, что отступ слева создаёт ul, у него по дефолту есть padding

UPD: Немного невнимательно прочитал, если вам нужно, чтобы элементы меню растянулись не по всей странице, а только внутри блока .main_row, тогда его стиль убирать не нужно

Подстройте этот пример под свои стили:

ul.full-width {
  width: 100%;
  /* Ширина основного блока меню */
  height: 50px;
  /* Высота основного блока меню */
  position: relative;
  display: table;
  margin: 0;
  padding: 0;
}

ul.full-width li {
  display: table-cell;
  position: relative;
}

ul.full-width li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #FFF;
  line-height: 50px;
  /* Приравниваем к высоте, чтобы выровнять текст по вертикали */
}

ul.full-width li ul {
  display: none;
  /* Скрываем выпадающее меню */
  position: absolute;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

ul. full-width li ul li {
  display: block;
}

ul.full-width li:hover ul {
  display: block;
  /* Показываем выпадающее меню, где оно есть, при наведении */
}
<ul>
  <li>
    <a href="#">О компании</a>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Технологии</a></li>
    <li><a href="#">Проекты</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

1

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как растянуть меню по ширине css

Два способа сделать меню для сайта на HTML и CSS

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

Так уж исторически сложилось, что для реализации навигации на сайте используют ненумерованный список. Поэтому, имея стандартную структуру HTML, будем добиваться необходимого нам результата при помощи CSS стилей и в этой статье рассмотрим два, наиболее часто употребляемых варианта.

Как я и говорил, структура меню в обоих способах одинакова, меняется только >

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

Далее добавляем CSS стили меню:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;

2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;

3. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float;

4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;

5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;

В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.

HTML без изменений, для примера меняем >

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

После использования этих стилей все пункты станут одинаковыми по ширине, а также растянуться по всей ширине обертки.

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с >

CSS, опять же, стандартный, отличаются только эти строки:

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с >

Вот такое вот горизонтальное меню, полностью валидное и без лишних свойств и тегов. Скачиваем архив с примером и пользуемся!

Растянуть фон меню по ширине экрана — Вопросы по CSS

Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla.

JComments 4.0.4 — компонент комментариев для Joomla 4

21.11.2021 вышла новая версия популярного компонента комментариев JComments. Компонент развивается сообществом на GitHub. Все релизы отмечены как maintaince release. Это означает поддержку расширения в работоспособном состоянии без добавления нового функционала.

Небольшая подборка статей на русском по Joomla 4

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

Как растягивать элементы по горизонтали при использовании flex-box

Я пытаюсь растянуть внутренние объекты по горизонтали, чтобы они заполнили ширину своего контейнера.

Высота внутренних элементов div растягивается благодаря свойству:

Как растянуть ширину этих элементов?

2 ответа

Просто добавьте flex:1 к гибким элементам:

Вы используете flexbox со значением по умолчанию flex-direction: row . Которая размещает элементы в ряд и регулирует их ширину в зависимости от их исходной ширины и свойств гибкости.

Это означает, что align-items: stretch; растянет элементы таким образом, чтобы они соответствовали родительскому элементу, но не по ширине, а по высоте. поскольку их ширина определяется свойством flex;

Используйте flex: 1 1 auto; , чтобы подогнать элемент к своему родительскому.

Изображение на всю ширину макета

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

При «резиновом» макете, когда требуется установить изображение на всю ширину окна браузера, независимо от его размера, применяют методы, которые подробно описаны далее.

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега <img> значение атрибута width устанавливается равным 100% (пример 1). Изображение в таком случае растягивается на всю ширину контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом неизбежно появятся искажения, поэтому подобный метод применяется достаточно редко и далеко не для всех картинок.

Пример 1. Ширина изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Картинка 100% ширины</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" 
  alt="Иллюстрация"></p>
 </body>
</html>

В данном примере ширина (width) рисунка задана как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

Вначале следует подготовить фоновый рисунок, он обязательно должен быть таким, что если рядом положить две одинаковые картинки, то они сливаются в одну, и между ними не возникает заметных артефактов. Пример такого изображения показан на рис. 2.

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде 1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно, а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную площадь.

Сам фон представляет интерес лишь как часть общего результата. Это значит, что на фоновую область следует наложить еще один рисунок так, чтобы вместе они образовали единое целое. На рис. 3 показано изображение, правый край которого совпадает с фоновым рисунком. Поэтому при наложении этого рисунка на фон они точно совпадут.

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон образуют цельное изображение. В примере 2 приведено создание подобного блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/bg. gif) repeat-x; /* Параметры фона */
    height: 69px; /* Высота слоя */
    border-bottom: 2px solid maroon; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
   <img src="images/logo.gif" alt="Логотип сайта">
  </div>
 </body>
</html>

В данном примере высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение на таком фоне применяют тонирование рисунка (сепия, как это еще называется) или градиентный переход, как показано на рис. 4.

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого перехода от изображения к фону может не получиться, поскольку будет виден заметный стык. В этом случае лучше применять формат GIF или PNG.

При использовании одноцветного фона код незначительно поменяется (пример 3). Повторять фон теперь не нужно, поэтому свойство background будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый цвет</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: #66a240; /* Цвет фона */
    height: 100px; /* Высота слоя */
    font-family: Verdana, sans-serif; /* Гарнитура шрифта */
    font-size: 32px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: white; /* Белый цвет текста */
   }
  </style>
 </head>
 <body> 
  <div>
  <img src="images/logo2. png" alt="Логотип сайта" align="middle">
  Выставка цветов
  </div>
 </body>
</html>

В данном примере устанавливаем параметры блока — его высоту и цвет, а также характеристики текста заголовка. Полученный результат продемонстрирован на рис. 5.

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения этой цели применяют следующий алгоритм. Вначале подготавливается изображение достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как фоновый рисунок для определенного слоя.

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении монитора, кроме, разве что, самого фантастического и редко используемого. Если такой рисунок просто добавить через тег <img>, то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем швам макет страницы. Использование изображения как фона и обеспечивает отсутствие ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета, но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же свойство background, в качестве его значения задается путь к фоновой картинке и ее параметры. Так, значение right top говорит, что правый край изображения будет фиксироваться, а при изменении ширины окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/popart. png) no-repeat; /* Параметры фона */
    height: 200px; /* Высота слоя */
   }
  </style>
 </head>
 <body> 
   <div></div>
 </body>
</html>

При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:

  • рисунок должен быть таким, чтобы при обрезании части изображения он не терял свою информативность;
  • большая ширина предполагает и большой объем графического файла, который следует ограничить за счет уменьшения числа цветов, снижения качества картинки или другими параметрами.

Резюме

Способ добавления изображения на всю ширину макета веб-страницы зависит от применяемого метода верстки. Если используется макет фиксированной ширины, то общая его ширина известна заранее и рисунок по горизонтали следует ограничить этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом, что получается слитная единая картинка. Также применяются широкие фоновые изображения, которые не приводят к появлению горизонтальной полосы прокрутки, но при этом занимают всю отведенную им ширину, независимо от размера окна браузера.

Блочная модель — Изучение веб-разработки

  • Назад
  • Обзор: Building blocks
  • Далее

Каждый элемент в CSS заключён в блок, и понимание поведения этих блоков — это ключ к умению задавать раскладку с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы надлежащим образом рассмотрим блочную модель CSS, чтобы вы могли создавать более сложные раскладки, понимая принцип ее работы и терминологию, которая к ней относится.

В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.

Если элемент определён как блочный, то он будет вести себя следующим образом:

  • Начнётся с новой строки.
  • Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
  • Будут применяться свойства width и height.
  • Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.

Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <h2>) и <p>, все используют block как свой внешний тип отображения по умолчанию.

Если элемент имеет тип отображения inline (строчный), то:

  • Он не будет начинаться с новой строки.
  • Свойства width и height не будут применяться.
  • Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
  • Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.

Элемент <a>, используемый для ссылок, <span>, <em> и <strong> — всё это примеры по умолчанию строчных элементов.

Тип отображения, применяемый к элементу, определяется значениями свойства display, такими как block и inline, и относится к внешнему значению display.

Здесь следует объяснить, что такое внутренние и внешние типы отображения. Как уже говорилось выше, каждый блок в CSS имеет внешний тип отображения, который определяет, блочный он или строчный.

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

Однако мы можем изменить внутренний тип отображения, используя такие значения display как flex. Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex. Любые прямые дочерние элементы этого блока станут flex-объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

Примечание: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение (en-US).

Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex и другие внутренние значения, которые могут быть у ваших элементов, например grid.

Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют нормальным потоком (normal flow), потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.

Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения block. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.

Второй — это список, который свёрстан с использованием display: flex. Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.

Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <span>. Эти элементы по умолчанию имеют тип inline, однако у одного из них задан класс block, для которого мы установили display: block.

Мы можем видеть, как строчные элементы (inline) ведут себя в следующем примере. Элементы <span> в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.

У нас также есть элемент <ul>, для которого установлено display: inline-flex, что создаёт строчный элемент вокруг нескольких flex-объектов.

Наконец, у нас есть два абзаца, для которых установлено display: inline. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.

В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.

Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.

В оставшейся части урока мы сосредоточимся на внешнем типе отображения.

Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.

Составляющие элемента

Составляя блочный элемент в CSS мы имеем:

  • Содержимое: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как width и height.
  • Внутренний отступ: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью padding и связанных свойств.
  • Рамка: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью border и связанных свойств.
  • Внешний отступ: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью margin и связанных свойств.

Рисунок ниже показывает эти слои:

Стандартная блочная модель CSS

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

Предположим, что в элементе есть следующий CSS определяющий width, height, margin, border, и padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.

Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.

Альтернативная блочная модель CSS

Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).

По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.

.box {
  box-sizing: border-box;
} 

Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Примечание: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.

В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который даёт им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?

Примечание: вы можете найти решение этой задачи здесь.

Использование инструментов разработчика в браузере для просмотра блочных моделей

Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!

Вы уже видели свойства margin, padding и border в работе в приведённом выше примере. Используемые в этом примере свойства — сокращённые и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.

Давайте рассмотрим эти свойства более подробно.

Внешний отступ (margin)

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

Мы можем контролировать все поля элемента сразу, используя свойство margin, или каждую сторону индивидуально, используя эквивалентные полные свойства:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.

Схлопывание внешних отступов

Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.

В примере ниже есть два абзаца. Первому абзацу задан margin-bottom 50 пикселей. У второго абзаца margin-top 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.

Вы можете проверить это, установив второму абзацу margin-top равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в margin-bottom первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.

Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. margin collapsing. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.

Рамка

Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям width и height элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему width и height.

Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.

Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство border.

Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:

  • border-top (en-US)
  • border-right (en-US)
  • border-bottom
  • border-left (en-US)

Для установки ширины, стиля или цвета всех рамок используйте:

  • border-width
  • border-style (en-US)
  • border-color (en-US)

Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:

  • border-top-width (en-US)
  • border-top-style (en-US)
  • border-top-color (en-US)
  • border-right-width (en-US)
  • border-right-style (en-US)
  • border-right-color (en-US)
  • border-bottom-width (en-US)
  • border-bottom-style (en-US)
  • border-bottom-color (en-US)
  • border-left-width (en-US)
  • border-left-style (en-US)
  • border-left-color (en-US)

В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.

Внутренний отступ (padding)

Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.

Вы можете контролировать значение padding для всех сторон элемента, используя свойство padding, или для каждой стороны индивидуально, используя следующие полные свойства:

  • padding-top (en-US)
  • padding-right
  • padding-bottom (en-US)
  • padding-left

Если вы измените значения padding для класса . box в примере ниже, то увидите, что это изменяет положение текста внутри элемента.

Вы также можете изменить padding для класса .container, который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.

Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к <span>.

В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к немуwidth, height, margin, border и padding. Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.

Существует особое значение display, которое представляет собой золотую середину между inline и block. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял width и height и избегал перекрытия, показанного выше.

Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:

  • Применяются свойства width и height.
  • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.

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

В следующем примере мы добавили display: inline-block к нашему элементу <span>. Попробуйте изменить значение свойства на display: block или полностью удалить строку, чтобы увидеть разницу.

Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив padding. <a> — это строчный элемент, такой же как <span>; вы можете использовать display: inline-block, чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.

Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a>, потому что хотим, чтобы background-color изменялся при наведении курсора на <a>. Отступы перекрывают рамку элемента <ul>. Это происходит потому, что <a> — строчный элемент.

Добавьте в правило display: inline-block с помощью селектора . links-list a, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.

В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. Проверка своих навыков: блочная модель.

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

В следующем уроке мы рассмотрим, как можно использовать фон и рамки, чтобы сделать ваши простые блоки более интересными.

  • Назад
  • Обзор: Building blocks
  • Далее
  1. Каскад и наследование
  2. Селекторы CSS
    • Селекторы типа, класса и ID
    • Селекторы атрибута
    • Псевдоклассы и псевдоэлементы
    • Комбинаторы
  3. Блочная модель
  4. Фон и рамки
  5. Обработка разных направлений текста
  6. Переполнение содержимого
  7. Значения и единицы измерения
  8. Изменение размеров в CSS
  9. Элементы изображений, форм и медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация вашего CSS

Last modified:

Мы собрали подборку свежих, красивых и удобных горизонтальных меню для сайта, созданных с помощью CSS3 и jQuery. Все что вам нужно сделать, это просто оформить их под собственные требования.

Выбор редакции: Mega Menu Reloaded

Mega Menu Reloaded предлагает множество опций для создания комплексных современных меню навигации. Плагин работает без использования Javascript, и даже при отключении поддержки этой технологии меню будет отлично смотреться практически в любом браузере. За сравнительно небольшие вы получите функциональное меню навигации без необходимости связываться с написанием кода:

Полноценное решение для создания отличных меню навигации

  • jMenu
    • Ascensor
    • jQuery Dropdown Login Form
    • HorizontalNav
    • jQuery Navigation Plugin
    • Automatic Ajax jQuery Navigation
    • Kwicks Extended Navigation
    • CasperJS
    • Bootstrap Image Gallery
    • Flipboard Layout
    • TinyNav
    • stack. js
    • flexnav
    • jQuery Keyboard Navigation Plugin
    • Menutron
    • jlnav
    • Simple Responsive jQuery Navigation
    • Scrollpath
    • filtrify
    • Curtain.js
    • PageSlide
    • Smooth Div Scroll
    • HTML5/CSS3 Gray Navigation Menu
    • Responsive CSS Navigation Menu
    • Pro CSS Menu
    • Bold CSS3 Navigation (платно – $4)
    • Modern Vertical Menu (платно – $2)
    • Modern Menu (платно – $2)
    • Metro (платно – $3)
    • jQuery jPList Plugin (платно – $5)

jQuery-плагин, который позволяет создавать красивое горизонтальное меню для сайта с неограниченным количеством подменю. Кроме самой библиотеки jQuery вам также потребуется использовать jQuery UI. Но при этом плагин поддерживает все эффекты, доступные в этой библиотеке (например, fadeIn или slideDown). Разметка меню опрятная, так как здесь используются вложенные списки.

jQuery-плагин для создания меню со специальной системой размещения контента на странице.

Простая и миниатюрная выпадающая форма авторизации на jQuery, которую просто установить на страницу.

HorizontalNav представляет собой jQuery-плагин для создания горизонтального резинового меню для сайта, которое растягивается на всю ширину экрана или контейнера. Если вам приходилось создавать подобный эффект, то вы наверняка знаете, насколько это трудно. Плагин значительно облегчает эту задачу, даже если вы используете адаптивный дизайн.

Простой плагин навигации с двумя возможными эффектами: ‘fade’ и ‘slide’.

Задача jQuery-плагина Ajax-Navigation заключается в автоматической трансформации обычных ссылок в Ajax-запросы для мобильных браузеров и отключении отображения адресной строки при нажатии по ссылкам. Это позволяет улучшить опыт взаимодействия с пользователем. Также плагин предлагает функции onLoad и onUnload для каждой страницы, за счет чего можно добиться привлекательных эффектов при их открытии.

Kwicks для jQuery начинал свою историю как часть популярного набора эффектов Mootools, но перерос в отдельный универсальный виджет.

Утилита для создания и тестирования многоуровневого горизонтального меню для сайта с открытым исходным кодом, написанная на JavaScript и основанная на PhantomJS. Она значительно облегчает процесс разработки меню, а также предлагает продвинутые функции и методы.

Расширение для модального окна из набора инструментов Bootstrap от Twitter, которое позволяет использовать для навигации мышь и клавиатуру. А также включать эффекты перехода, активировать полноэкранный режим, а также запускать слайд-шоу.

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

Миниатюрный jQuery-плагин, который позволяет конвертировать элементы <ul> и <ol> в выпадающие списки для маленьких экранов. Он также автоматически выделяет текущую страницу и добавляет selected=”selected” для выделенного элемента.

Библиотека для презентаций с интуитивной навигацией на базе скроллинга.

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

Плагин создает меню, с помощью которого можно переходить по элементам на странице, используя стрелки на клавиатуре.

jQuery-плагин для создания адаптивных навигационных меню.

Представляет собой jQuery-плагин, который позволяет создавать оригинальное горизонтальное меню для сайта на CSS из вложенных неупорядоченных списков.

Миниатюрный и простой в использовании фреймворк и jQuery-плагин для создания адаптивных (многоуровневых) навигационных меню.

Плагин для установки пользователем направления прокрутки. Здесь для прорисовки линий и арок используется синтаксис на основе canvas.

Продвинутым этот плагин считается потому, что позволяет осуществлять поиск по нескольким критериям одновременно в различных категориях сайт. А также просматривать количество записей, включающих указанные теги в режиме реального времени.

Способен превратить ваш сайт в анимированное произведение искусства.

jQuery-плагин, который позволяет прокручивать веб-страницу, чтобы открыть дополнительную секцию управления.

Простой jQuery-плагин, который позволяет прокручивать контент влево или вправо.

Простенькое горизонтальное меню для сайта на HTML5 и CSS3.

Это адаптивное меню навигации на CSS3 использует медиа-запросы для достижения гибкости и отзывчивости дизайна. Шаблон способен подстраиваться под экраны любых размеров. Плагин включает в себя три цветовые вариации, в каждой из которых представлены эффекты при наведении курсора.

Универсальное CSS-меню, которое можно сразу использовать в собственных дизайнах. Оно представлено в нескольких цветовых схемах, а также предлагает возможность настройки при помощи CSS.

Современное горизонтальное резиновое меню для сайта с красивыми шрифтами и продуманной цветовой комбинацией. Оно доступно в двух версиях (горизонтальной и вертикальной) и 8 цветовых схемах. Благодаря семантической разметке меню очень просто пользоваться.

Опрятное и красивое навигационное меню, представленное в двух цветовых схемах. Оно позволяет реализовать выпадающие списки, а также использовать плавные эффекты.

Разработан с учетом модных тенденций, гибкости и простоты в использовании. Плагин идеально подойдет для создания быстрого и динамичного меню для сайта.

Горизонтальное меню для сайта представлено в нескольких “блочных” вариантах. Плагин предлагает 5 версий анимации изображений, а также несколько других привлекательных эффектов.

jPList представляет собой гибкий jQuery-плагин для сортировки, пагинации и фильтрации любых HTML-структур (div-элементов, UL/LI, таблиц и т. д.).

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, подписки, лайки!

Валентин Сейидовавтор-переводчик статьи «Horizontal Menu Collection: 35 Cool jQuery UI Bars»

Как разместить меню на всю ширину страницы с помощью HTML и CSS?

спросил

Изменено 6 лет, 3 месяца назад

Просмотрено 2к раз

Я только что освоил веб-язык (HTML, CSS) и создаю свою первую страницу. Я нахожу шаблон html горизонтального меню, которое я хотел бы применить к своей странице. К сожалению, я не могу изменить его, потому что он распространяется на всю ширину моей страницы.

Я исследую сеть, пытаясь найти, как это сделать, и я думаю, что это должно быть связано со свойством width = 100% .

Думаю решение должно быть простым, но даже просмотрев пост StackOverflow по подобным проблемам я не нашел. Когда я применяю решения, найденные в моем коде, это не работает.

Вот код:

 корпус
{
 цвет фона: черный; /* Le Fond de la page sera noir */
}

#nav
{
заполнение: 0;
}

#нав ли
{
дисплей: встроенный;
}

#нав ли а
{
семейство шрифтов: Arial;
размер шрифта: 12px;
текстовое оформление: нет;
плыть налево;
отступ: 10 пикселей;
цвет фона: #333333;
цвет:#ffffff;
нижняя граница: 1px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
}

#nav li a: hover
{
цвет фона:#9В1С26;
заполнение снизу: 12px;
нижняя граница: 2px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
поля:-1px;
} 
 
<голова>
    <метакодировка="utf-8" />

    Антуан

<тело>
   
<ул>
  • Главная
  • О нас
  • Услуги
  • Товары
  • Карта сайта
  • Справка
  • Свяжитесь с нами
    • HTML
    • CSS
    • Меню
    • NAV

    Вы можете сделать это, показывая свой UL ( #NAV ID), как встроенный вклад и затем настройка . Кроме того, вы должны добавить background-color , чтобы увидеть эффект.

     корпус
    {
     цвет фона: черный; /* Le Fond de la page sera noir */
    }
    
    #nav
    {
    заполнение: 0;
    отображение: встроенный блок;
    ширина: 100%;
    цвет фона: #333333;
    }
    
    #нав ли
    {
    дисплей: встроенный;
    }
    
    #нав ли а
    {
    семейство шрифтов: Arial;
    размер шрифта: 12px;
    текстовое оформление: нет;
    плыть налево;
    отступ: 10 пикселей;
    цвет фона: #333333;
    цвет:#ffffff;
    нижняя граница: 1px;
    нижний цвет границы:#000000;
    нижняя граница: сплошная;
    }
    
    #nav li a: hover
    {
    цвет фона:#9В1С26;
    заполнение снизу: 12px;
    нижняя граница: 2px;
    нижний цвет границы:#000000;
    нижняя граница: сплошная;
    поля:-1px;
    } 
     
    <голова>
        <метакодировка="utf-8" />
    
        Антуан
    
    <тело>
       
    <ул>
    
  • Главная
  • О нас
  • Услуги
  • Товары
  • Карта сайта
  • Справка
  • Свяжитесь с нами
  • 1

    Я считаю, что вам следует добавить это, если вы хотите, чтобы ваше меню занимало 100% ширины вашей страницы.

     #nav
    {
    заполнение: 0;
    ширина: 100%;
    плыть налево;
    цвет фона: #333333;
    }
     

    background-color: #333333 — добавлено, чтобы сделать его более заметным.

    1

     корпус {
       цвет фона: белый;
       /* Le Fond de la page sera noir */
     }
     #nav {
       /* сброс ненумерованного списка, чтобы не использовать стили списка по умолчанию */
       стиль списка: нет;
       заполнение: 0;
       маржа: 0;
       /* добавить гибкий дисплей с пробелами и центрированием по вертикали. .. также остановить перенос */
       дисплей: гибкий;
       выравнивание содержимого: пространство вокруг;
       выравнивание элементов: по центру;
       гибкая обертка: без обертки;
       /* цвет, необходимый для фона, также должен выглядеть последовательно */
       цвет фона: #333333;
     }
     #нав ли {
       семейство шрифтов: Arial;
       размер шрифта: 12px;
       текстовое оформление: нет;
       плыть налево;
       отступ: 10 пикселей;
       цвет: #ffffff;
       нижняя граница: 2px;
       цвет нижней границы: прозрачный;
       нижняя граница: сплошная;
     }
     #nav li a:hover {
       /* избегайте изменения размера или положения элементов при наведении курсора... это может привести к скачку содержимого */
       цвет фона: #9В1С26;
       нижний цвет границы: #000000;
     } 
     <ул>
      
  • Главная
  • О нас
  • Сервисы
  • Товары
  • Карта сайта
  • Справка
  • Связаться с нами
  • Это всего лишь пример того, что вы можете сделать, конечно, не золотой стандарт, но он заставит вас задуматься о возможностях. Надеюсь это поможет. CSS был прокомментирован с изменениями.

    1

    Попробуйте поместить список меню в DIV следующим образом:

     body
    {
     цвет фона: черный; /* Le Fond de la page sera noir */
    }
    #навдив
    {
    заполнение 0;
    цвет фона: #333333;
    ширина: 100vw;
    высота: 34 пикселя;
    }
    #навул
    {
    заполнение: 0;
    ширина: 100Вт;
    }
    
    #навул ли
    {
    дисплей: встроенный;
    }
    
    #навул ли а
    {
    семейство шрифтов: Arial;
    размер шрифта: 12px;
    текстовое оформление: нет;
    плыть налево;
    отступ: 10 пикселей;
    цвет фона: #333333;
    цвет:#ffffff;
    нижняя граница: 1px;
    нижний цвет границы:#000000;
    нижняя граница: сплошная;
    }
    
    #навул ли а: наведите курсор
    {
    цвет фона:#9В1С26;
    заполнение снизу: 12px;
    нижняя граница: 2px;
    нижний цвет границы:#000000;
    нижняя граница: сплошная;
    поля:-1px;
    } 
     
    
    <голова>
        <метакодировка="utf-8" />
        
        Антуан
    
    <тело>
    
        <дел>
    <ул>
                
  • Главная
  • О нас
  • Услуги
  • Товары
  • Карта сайта
  • Справка
  • Свяжитесь с нами
  • Я рекомендую вам изучить и использовать бутстрап, потому что он делает это легко. В вашем случае это очень просто, вы создадите 2 элемента

    за пределами вашего navbar . Один, чтобы сделать ширину 100% и применить ваш фон, а затем другой, чтобы центрировать ваш код.

    Мой ответ на ваш вопрос:

     <стиль>
    .полная ширина{
        ширина: 100%;
    }
    .centerlize{
        ширина: 1024 пикселей;
        поле: 20px авто;
    }
    
    <тело>
        <дел>
            <дел>
                <ул>
                    
  • Главная
  • О нас
  • Услуги
  • Товары
  • Карта сайта
  • Справка
  • Свяжитесь с нами