Есть элементы списка, как их разместить в ряд по горизонтали?

Question

[lemonlimelike]

Вот есть список:

<ul class="one">
  <li class="two">Машина</li>
  <li class="two">Самолет</li>
  <li class="two">Поезд</li>
  <li class="two">Велосипед</li>
  <li class="two">Корабль</li>
  <li class="two">Косм.корабль</li>
</ul>

Как его разместить типа:
Машина Поезд Корабль
Самолет Велосипед Косм.корабль

Comments

[Сергей delphinpro]

.one { list-style: none; padding-left: 0; }
.two { display: inline-block; }
/* или */
.two { display: inline; }

Answer 1

[Adikjoro]

.one li {
  display: inline-block;
}

Между пунктами появятся пробелы, так как в html коде между тегами li есть отступы. Это достаточно решить, просто убрав закрывающие теги, конечно же, при необходимости.

<ul class="one">
  <li class="two">Машина
  <li class="two">Самолет
  <li class="two">Поезд
  <li class="two">Велосипед
  <li class="two">Корабль
  <li class="two">Косм.корабль
</ul>

Браузер сам закроет их, и к тому же без пробелов.

Comments

[Boris Köln]

Делать невалидный html - плохой совет.

[Adikjoro]

Boris Korobkov: Вы это привет передаете со стандартов HTML4.1?

[Артём]

https://www.w3.org/TR/html5/grouping-content.html#...

Tag omission in text/html:
An li element's end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.