Основание 6: верхний правый и левый стеки при переносе - PullRequest
Новая
       24

Основание 6: верхний правый и левый стеки при переносе

0 голосов
/ 25 мая 2019

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

Правый верхний бар работает нормально, когда класс переноса не применяется к div внутри класса nav. Я пробовал применять только класс wrap только к верхнему левому краю вместо всего класса nav, а также пробовал «float: right» для правого верхнего бара в CSS, но ни один из методов не решил проблему.

HTML код: 

<!-- DESKTOP NAVIGATION -->
    <nav class="top-bar">
        <div class="wrap">
          <div class="top-bar-left">
            <h3>Site Title</h3>
          </div> 
          <div class="top-bar-right">
            <ul class="menu">
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div> 
    </nav>

И CSS: 

/*GENERAL*/
.wrap {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

1 Ответ

0 голосов
/ 14 июня 2019

На верхней панели есть атрибуты, которые заставляют ее зависимые элементы отображаться встроенными и составлять стеки для узких дисплеев (display: flex для одного).Вы также можете применить все соответствующие атрибуты к классу wrap, но зачем изобретать велосипед?Разве это не сводит на нет всю причину использования системы сетки в первую очередь?Попробуйте удалить лишний div и поместить вместо него класс wrap: 

    <nav class="top-bar wrap">
      <div class="top-bar-left">
        <h3>Site Title</h3>
      </div> 
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

Или, чтобы упростить вещи, вы можете просто поместить эти атрибуты в .top-bar и не иметь класса переноса: 

.top-bar {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

Если вам нужен div-обертка, поместите его вне верхней панели, а не внутри.

...