HTML CSS LI Wrapping

Question

У меня есть вертикальное меню в моей системе, которое в основном состоит из HTML ul / li со стилем CSS (см. изображение ниже). Однако я не хочу, чтобы элементы li , которые шире меню, были перенесены, я бы предпочел, чтобы они были переполнены горизонтальной полосой прокрутки внизу меню. Как я могу сделать это в CSS?

Answer 1

ul {
  overflow: auto;  // allow li's to overflow w/ scroll bar
                   // at the bottom of the menu
}

li {
  white-space: nowrap; // stop the wrapping in the first place
}

Answer 2

Используйте пробел: nowrap . Вот так:

li {
  white-space:nowrap;
}

Вот некоторая документация .

Answer 3

Вам также нужно указать стиль ul:

ul{
 width:250px;
 overflow:auto;
}