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