Последний компонент li выравнивания ul ниже остальных

0

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

<div class='top_menu_wrapper'>
    <div class='top_menu_center'>
        <ul>
            <li class='menu_link menu'>Who We Are</li>
            <li class='menu_link menu'>Family House</li>
            <li class='menu_link ypac_logo menu'> IMAGE PLACEHOLDER</li>
            <li class='menu_link menu'>Upcoming Events</li>
            <li class='menu_link menu'>Get Involved</li>
        </ul>
    </div>
</div>

CSS:

.top_menu_wrapper{
  min-height: 65px;
  border: 1px solid black;
  position: fixed;
  width:100%
  }
.top_menu_center{
 width:65%;
 border: 1px solid black;
 margin: 0 auto;
 height:100px;
 }
.top_menu_center ul{
 list-style-type:none;
 width:100%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 height:100px;
}
.top_menu_center li{
 display:inline-block;
 height:100px;
 width:20%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:center;
}
  • 0
    Это в хром кстати
Теги:
html-lists

4 ответа

0

Вы можете попробовать использовать float: left вместо отображения: inline

.top_menu_center li{
    float: left;
    height:100px;
    width:20%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
}

См.: http://fiddle.jshell.net/RQQLJ/

Поделиться
  • 0
    спасибо что тоже работает!
0

По какой-то причине сумма вашей ширины li составляет более 100%. Поэтому последний элемент выталкивается из коробки. Во всяком случае, если вы измените ширину li с 20% до 19%, он лучше подходит для Chrome. Вы можете сделать исследование о том, почему 5 * 20%! = 100% в этом случае.

Скрипт: http://jsfiddle.net/WP6Lb/

Поделиться
  • 0
    Хорошо. это заставляет меня чувствовать, что я не совсем сумасшедший. 19% подходит, но это определенно странно. Я думал, что очистка полей и отступы сделают это.
  • 0
    да, я все еще не доверяю inline-block полностью во всех браузерах, поэтому я стараюсь избегать этого. Я на самом деле согласен с ответом @Brian Grahams. Я бы пошел с display:block; float:left; подход.
0

Вы должны просто поплавать li и настроить его так, чтобы ul очистила float.

Здесь jsfiddle: http://jsfiddle.net/efgdY/

В качестве побочного примечания, если вы намереваетесь их оттолкнуть (на 10-15 пикселей, как и в исходном CSS), вы можете установить значение padding-top и добавить box-sizing: border-box; .top_menu_center li.

Поделиться
0

Вам необходимо изменить inline-block на inline

.top_menu_center li{
 display:block;
 float:left;
 height:100px;
 width:20%;
 margin:10px 0;
 padding:0 0;
 text-align:center;
}

У вас будут проблемы с интервалом, поэтому я установил jsfiddle здесь: http://jsfiddle.net/rileychuggins/YF7DX/

Поделиться
  • 0
    Благодарю. Я думаю, что проблема заключается в том, как разместить их в контейнерах. Вы не можете указать высоту и ширину, если они не являются элементами inline-block, верно? Не могли бы вы указать мне правильное направление, как это отформатировать? я должен обернуть их в элементы div?
  • 0
    Вам нужна определенная высота, так как она находится в содержащем div? Вы могли бы держать это встроенным и добавить position:relative; top:10px или как далеко вам нужно сверху.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню