Как выводить список ul в ширину, а не длину?

Рейтинг: 0Ответов: 1Опубликовано: 31.10.2014

Собственно, хочу сделать, чтобы сам список отображался в ширину (вправо), а не в длину (вниз).

Помогите, пожалуйста. Заранее спасибо! :-)

<div id="topMenu">
     <ul>
          <li class="firstMenuItem">ГЛАВНАЯ
          <li>ЗАПРОС
          <li>ДОСТАВКА И ОПЛАТА
          <li>О НАС
          <li class="lastMenuItem">КОНТАКТЫ
     </ul>
</div>

#topMenu {
    height: 100px;
    margin: 0 auto;
    background-color: #fff;
    width: 980px;
    min-width: 980px;
    font-family: Tahoma;
    font-size: 15px;
    color: #445566;
}

#topMenu ul {
    list-style-type: none;
}

Скриншот моего: http://clip2net.com/clip/m0/df83f-clip-4kb.png?nocache=1

Скриншот, как хочу: http://clip2net.com/clip/m0/1f326-clip-9kb.png?nocache=1

Ответы

▲ 2Принят
  1. Используйте свойство display: inline-block для li
  2. HTML5 - это хорошо, но хорошим тоном будет теги закрывать, хоть это и не обязательно.

P.S. с inline-block появится некоторое расстояние между li-шками, поэтому для ul:

font-size: 0;
line-height: 0;

А для li установить нужный font-size и line-height