Supongamos que tiene algo de estilo y el marcado:
ul
{
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
}
li
{
display: inline-block;
}
<div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
</ul>
</div>
Cuando ves esto. El <ul>
tiene una barra de desplazamiento en la parte inferior, aunque he especificado los valores visibles y ocultas para el desbordamiento x / y.
(observado en Chrome 11 y opera (?))
Supongo que debe haber alguna especificación de w3c o algo que indique que esto suceda, pero por mi vida no puedo entender por qué.
ACTUALIZACIÓN: - Encontré una manera de lograr el mismo resultado agregando otro elemento envuelto alrededor del ul
. Echale un vistazo.
overflow-x hidden;
, elimina el desplazamiento, pero como necesito los elementos li para ocultar el borde en la parte inferior, da el efecto discontinuo deseado. No entiendo por quéoverflow-x: visible
crea una barra de desplazamiento. No debería afaik.overflow: hidden;
y el niño insertado alrededor del<ul>
seroverflow: visible
.