Как заставить горизонтальную прокрутку в списке HTML с помощью CSS?
У меня есть список, как это:
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
и следующий CSS:
ul {
width: 160px;
height: 100px;
overflow: auto;
}
li {
width: 80px;
display: inline-block;
float: left
}
Я пытаюсь заставить элементы списка отображаться слева направо, то есть
one - two - three - four
Моя проблема:
Делая это так, я получаю две строки с двумя предметами в каждой.
Вопрос:
Есть ли способ CSS заставить все элементы списка быть в одной строке, чтобы я мог использовать горизонтальную прокрутку? Прямо сейчас, если я установлюпереполнение: авто Я получаю только вертикальные полосы прокрутки, которые мне не нужны.
Я не хочу устанавливать это на упаковке div. Мне просто любопытно, есть ли решение CSS, которое я могу использовать только в списке.
Спасибо за помощь!