У меня есть список, как это:

<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, которое я могу использовать только в списке.

Спасибо за помощь!