Envoltura HTML CSS LI

Question

Tengo un menú vertical en mi sistema que está hecho básicamente de HTML ul / li con estilo CSS (ver imagen a continuación). Sin embargo, no quiero que los elementos li que son más anchos que el menú se ajusten, preferiría que se desborden con una barra de desplazamiento horizontal en la parte inferior del menú. ¿Cómo puedo hacer esto en 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

Use white-space: nowrap . Me gusta así:

li {
  white-space:nowrap;
}

Aquí hay alguna documentación .

Answer 3

También deberías darle al estilo el ul:

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