Предположим, у вас есть стиль и разметка:
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>
Когда вы смотрите это. <ul>
Имеет полосу прокрутки в нижней части , даже если я указал видимые и скрытые значения для перелива х / у.
(наблюдается на Chrome 11 и Opera (?))
Я предполагаю, что должна быть какая-то спецификация w3c или что-то такое, что говорит о том, что это произойдет, но я не могу понять почему.
ОБНОВЛЕНИЕ: - Я нашел способ добиться того же результата, добавив еще один элемент, обернутый вокруг ul
. Проверьте это.
overflow-x hidden;
его, он удалит прокрутку, но мне нужны элементы li, чтобы скрыть границу внизу, чтобы получить желаемый пунктирный эффект. Я не понимаю, почему overflow-x: visible
создает полосу прокрутки. Это не должно afaik.
overflow: hidden;
и ребенка, вставленного вокруг <ul>
существа overflow: visible
.