1

У нас есть меню допустим оно определено следующим кодом:

<nav class="horizontal-nav full-width">
          <ul>
            <li><a href="#">Navigation Item</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>

Когда открываешь его в браузере будет приблизительно следующее:

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

Мне важно понять принцип, относительно чего и как позиционировать т.к. как я понимаю его можно применять не только к меню.

2 ответа 2

1

Достаточно добавить css класс nav-justified

Пример можно посмотреть на сайте официальной документации

1

как вариант

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav > ul {
  display: table;
  width: 100%;
  background: #39909A;
  height: 50px;
}

nav > ul > li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  font-size: 14px;
  line-height: 50px;
}

nav > ul > li a {
  display: block;
  color: #fff;
  padding: 0 30px;
}

nav > ul > li:hover a {
  background: #000;
}
<nav class="horizontal-nav full-width">
  <ul>
    <li><a href="#">Navigation Item</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.