Как вывести элементы списка в строку в CSS

Списки неотъемлемый элемент практически любой верстки сайтов. С их помощью можно создать перечень каких либо характеристик или условий в тексте, либо создать удобное меню навигации сайта.
Часто такой список приходится размещать горизонтально, в строку, но так как теги ul, ol и li являются блочными и размещаются друг под другом, то для того, чтобы разместить их в сроку, их нужно сделать строчными.

<div class="list">
  <ul>
    <li>inline</li>
    <li>inline</li>
    <li>inline</li>
    <li>inline</li>
    <li>inline</li>
  </ul>
</div>

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

.list li {
  display: inline;
}

.list li {
  display: inline-block;
}

Для того, чтобы разместить его в сроку нужно тег li сделать строчным, для этого необходимо ему назначить значение display:inline или display:inline-block.

Какое значение указать свойству display: зависит от вашей верстки, display:inline будет иметь ширину контента и изменить его размеры можно будет только с помощью свойства padding.
Значение display:inline-block также имеет ширину контента, но изменить его размеры можно с помощью свойств padding, width и height.

Пример:

Кроме изменений свойств тегов списка отвечающих за их расположение, также можно изменить внешний вид элементов, например, как в этом примере. С помощью свойств border сделать внешнюю обводку элементов, а с помощью padding указать необходимые отступы внутри элементов.