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

126

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

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

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

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

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

css

— RD
источник

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

— Анупам

184

ul li{
  display: inline;
}

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

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

— RZ.
источник

7

Хотя это выполняет свою работу, вы также захотите добавить некоторые отступы, чтобы элементы оставались хорошо разнесенными

— Роб Аллен

1

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

— рз.

1

Как заставить пули остаться? Или можно пули каким-то другим способом.

— RD

1

как указывает @DotDot: использование {display: inline} удаляет стиль маркера. Чтобы обойти это, выполните следующие действия: 1. вместо этого используйте {float: left} (хотя не работает в IE9). 2. добавьте отступ слева и добавьте фоновое изображение (то есть маркер в качестве фонового изображения).

— Adrien Be

26

В современных браузерах вы можете сделать следующее (совместим с 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>

Развернуть фрагмент

— davidlbaileysr
источник

15

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;
}

— Адель Ааджи
источник

9

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

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

— agm1984
источник

0

в начальной загрузке используйте .list-inlineкласс css

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Ссылка: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Мати Годжра
источник