Горизонтальное расположение элементов списка

Условие

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

 <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>

Ответ

Задайте display: flex для ul и запретите перенос. Уберите стандартные маркеры и отступы списка, а расстояние между элементами задайте через gap.

ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
li { flex: 0 0 auto; }

Все пять элементов будут идти в одну строку. При узком контейнере появляется горизонтальная прокрутка, а не переполнение страницы. Если перенос допустим, замените nowrap на wrap и пересмотрите overflow. Семантика ul/li при этом сохраняется.