как заставить горизонтальную прокрутку в списке 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, чтобы все элементы списка располагались в одной строке, чтобы можно было использовать горизонтальную прокрутку? Прямо сейчас, если я установлю overflow:auto, я получаю только вертикальные полосы прокрутки, которые мне не нужны.

Я не хочу устанавливать это в контейнере div. Мне просто любопытно, есть ли решение CSS, которое я могу использовать только в списке.

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