0

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

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

<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 ответа 2

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

2
  • 1
    Не согласен с тем, что хороший тон закрытие тега li.
    – soledar10
    31 окт 2014 в 17:32
  • @soledar10 обоснуйте тогда уж.
    – acidernt
    31 окт 2014 в 18:21
0

http://jsfiddle.net/8cksLmvh/

HTML

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

CSS

*{
    padding: 0;
    margin: 0;
}
#topMenu {    
    margin: 0 auto;
    background: #ccc;
    width: 980px;
    min-width: 980px;
    font-family: Tahoma;
    font-size: 15px;
    color: #445566;
    height: 50px;
}
#topMenu ul {
    list-style-type: none;
}
#topMenu ul li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;    
}
#topMenu ul li a{
    display: block;
    line-height: 50px;
    padding: 0 20px;
    text-decoration: none;
    color: #445566;
}
#topMenu ul li.active a{
    color: #fff;
    background: #000;
}
#topMenu ul li a:hover{    
    text-decoration: underline;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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