0

Подскажите, как правильно расположить горизонтально меню в шапке, чтобы до разрешения 1024px пункты меню были в одну строку?

T.е. чтобы пункт меню и текст не переносились на новую строку при уменьшении разрешения экрана.

Для ссылок ещё нужен hover, чтобы при наведении ссылка выделялась другим цветом.

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

Т.е. нужен адаптив

header {
  background: red;
}

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
  width: 95%;
  padding-left: 15px;
  padding-right: 15px;
}

aside {
  width: 19.91%;
  flex-basis: 19.91%;
  max-width: 281px;
  outline: 1px solid #fff;
  color: #fff;
}

.links {
  width: 80.09%;
  flex-basis: 80.09%;
  padding: 10px 0 10px 20px;
}

.links-ul {
  display: inline-flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  outline: 1px solid #fff;
}

li {
  display: inline-block;
}

a {
  font-size: 12px;
  padding: 18px 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  transition: .2s;
}

a:hover,
a.active {
  background: #bd3534;
}

@media (min-width: 1440px) {
  a {
    font-size: 14px;
    padding: 18px 20px;
  }
}
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<header>
  <div class="wrapper">
    <aside>
      aside
    </aside>
    <nav class="links">
      <ul class="links-ul">
        <li><a href="about.html">О нас</a></li>
        <li><a href="actions.html">Акции и скидки</a></li>
        <li><a href="delivery.html">Доставка и оплата</a></li>
        <li><a href="answers.html">Вопросы и ответы</a></li>
        <li><a href="reviews.html">Отзывы</a></li>
        <li><a href="news.html">Новости</a></li>
        <li><a href="seasons.html">Сезонный повод</a></li>
        <li><a href="contacts.html">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>

3
  • 1
    Покажите картинкой как должно выглядеть, мне лично из вашего описания не понятно ничего. 14 июл 2017 в 11:50
  • Не возникало мысли, сделать размер шрифта поменьше?
    – Air
    17 мар 2019 в 5:56
  • конкретнее опиши, покажи на картинке как надо. 17 мар 2019 в 6:36

4 ответа 4

0
 .links ul{
        display: inline-flex;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        outline: 1px solid #fff;
    }
3
  • нет, текст всё ещё переносится
    – word
    14 июл 2017 в 8:18
  • Пропишите отдельный класс для ul и установите ему display: inline-flex; 14 июл 2017 в 8:21
  • не работает с классом, не в классе дело
    – word
    14 июл 2017 в 8:24
0
@media only screen  and (max-width : 1024px) {
    .links-ul>li{ width: 180px;
                 font-family: Arial;
                 padding: 0px;
                 text-align: center;}
}
5
  • выше ведь сказано, что до разрешения 1024px, и ваш пример ничего не меняет
    – word
    14 июл 2017 в 9:00
  • так кто-то подскажет, как это сделать?
    – word
    14 июл 2017 в 10:16
  • я так понял это слишком сложный вопрос?
    – word
    14 июл 2017 в 11:16
  • @media only screen and (min-width : 1024px) { .links-ul>li{ width: 180px; font-family: Arial; padding: 0px; text-align: center;} } 14 июл 2017 в 11:18
  • вы внимательно читали? во первых 180px для каждого пункта из 8ми, будет 1440px, что уже больше нужного. И там разная ширина у текста, тут нужно паддинг
    – word
    14 июл 2017 в 11:42
0

Чтобы текст шёл в одну строку, добавьте: white-space: nowrap; в li или a. Например:

li {
    white-space: nowrap;
}
-1

Может прозвучать тупо, но как по мне, вам нужно просто увеличить ширину элементов меню, затем уменьшить padding

7
  • т.е. для каждого пункта меню задавать ширину? это будет не адаптив
    – word
    14 июл 2017 в 8:35
  • responsivedesign.is/develop/browser-feature-support/… вот, посмотрите как можно сделать меню с помощью @media 14 июл 2017 в 8:40
  • либо,если не хотите использовать media breakpoints, тогда используйте сетку того же bootsrap или materializecss 14 июл 2017 в 8:42
  • а что там можно увидеть полезного из вашей ссылки? список пустых медиа-запросов? и сетка не нужна
    – word
    14 июл 2017 в 8:44
  • как правильно подобрать паддинг и размер шрифта для ссылок?
    – word
    14 июл 2017 в 8:44

Ваш ответ

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

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