Как оформить список UL в одну строку

Question

Я хочу отобразить этот список в одну строку.

• Элемент списка 1
• Элемент списка 2

Должен быть показан как

* Элемент списка 2 * Элемент списка 2

Какой стиль CSS использовать?

Answer 1

ul li{
  display: inline;
}

Для получения дополнительной информации см. Опции базового списка и базовый горизонтальный список в listamatic. (спасибо Daniel Straight ниже за ссылки).

Кроме того, как указано в комментариях, вы, вероятно, хотите, чтобы стилизация ul и все элементы помещались внутри li и самих li, чтобы вещи выглядели красиво.

Answer 2

В современных браузерах вы можете делать следующее (совместимо с CSS3)

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Answer 3

HTML-код:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Код CSS:

ul.list li{
  width: auto;
  float: left;
}

Answer 4

Попробуйте поэкспериментировать с чем-то вроде этого:

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Я сделал кодовую ручку, чтобы проиллюстрировать: http://codepen.io/agm1984/pen/mOxaEM

Answer 5

По какой-либо причине показ: встроенный не будет работать? Я начал работать над стилем, и я совсем не новичок, а просто дисплей: inline ничего не делает, когда другие вещи что-то делают. Я даже удалил все остальное, просто чтобы быть уверенным, что ничто не повлияло на это, но несмотря ни на что, не работает ...

На самом деле, джентльмен, который разместил выше с дисплеем: сгибание было тем, что сработало ... Странно ...