Элементы верхней панели не выровнены

Что я здесь делаю неправильно, используя верхнюю панель Foundation 6, чтобы элементы меню не выстраивались в линию:

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text"><a href='#'>HandyMan!</a></li>                 
      <li><a href="/gallery">Gallery</a></li>                          
    </ul>
  </div>  
</div>

Как видно из этого JSFiddle: https://jsfiddle.net/4ky7jjja/

Я использую документацию отсюда: http://foundation.zurb.com/sites/docs/top-bar.html

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


css zurb-foundation-6
person Chris Nevill    schedule 24.07.2017    source источник
comment
может быть, это связано с классом или где он стоит? jsfiddle.net/4ky7jjja/1   -  person G-Cyrillus    schedule 24.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Класс menu-text в первом <li> добавляет дополнительные отступы, которых нет во втором (со ссылкой). Либо удалите этот класс, либо добавьте его к другому li, либо переопределите заполнение своим собственным css.

person sn3ll    schedule 24.07.2017
comment
Спасибо... Я все еще немного запутался. Почему этого нет в оригинальной документации TopBar? Единственное, что я добавил, это ссылку на пункт текстового списка меню. - person Chris Nevill; 25.07.2017
comment
Точно. Но ссылка, которую вы добавили, не имеет дополнительного заполнения. Вам нужно добавить его. - person sn3ll; 25.07.2017