Як стилізувати список UL в один рядок

126

Я хочу вивести цей список в один рядок.

Позиція1
Позиція2

Показувати як

* Елемент списку2 * Список елемента2

Який стиль CSS використовувати?

css

— RD
джерело

Я знаю, що це питання не характерне для завантажувальної програми, але я знайшов ескізи завантажувальної програми дуже корисними для горизонтального списку тексту, зображень, відео тощо.

— Анупам

184

ul li{
  display: inline;
}

Докладніше див. Основні параметри списку та основний горизонтальний список у listamatic. (спасибі Даніелю Прямому нижче за посилання).

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

— rz.
джерело

7

Хоча ця робота буде виконана, ви також захочете включити трохи прокладки, щоб елементи були чітко розставлені

— Роб Аллен

1

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

— рз.

1

Як змусити кулі залишитися? Або ми можемо кулями іншим способом.

— РД

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

в bootstrap використовувати .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

— Матей Годжра
джерело