Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS? - PullRequest
Новая
       41

Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?

38 голосов
/ 27 января 2010

Мне это нужно, потому что я хочу, чтобы меню (составленное из списка HTML) отображалось горизонтально.

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

Я также хотел бы удалить отступы для подсписков. Возможно ли это?

Ответы [ 3 ]

62 голосов
/ 27 января 2010

Вам придется использовать что-то вроде ниже 

#menu ul{
  list-style: none;
}
#menu li{
  display: inline;
}
	
<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>
13 голосов
/ 27 января 2010

довольно просто: 

ul.yourlist li { float:left; }

или 

ul.yourlist li { display:inline; }
10 голосов
/ 23 июня 2014

Использование display: inline-flex

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>

Использование display: inline-block 

#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
}
<div id="menu">
  <ul>
    <li>1 menu item</li>
    <li>2 menu item</li>
    <li>3 menu item</li>
  </ul>
</div>
...