списки отображаются в виде блоков вместо встроенного блока

Question

У меня есть <ul id="slide-holder">, который содержит несколько <li class="slide">.

CSS:

#slide-holder{
    position:absolute;
    width: 720px;
    height: 540px;
    background-color:#FFF;
    display: block;
    list-style:none;
}
.slide{
    width:720px;
    height:540px;
    display:inline-block;
    list-style:none;
}

HTML:

<ul id="slide-holder">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
</ul>

Проблема в том, что вместо того, чтобы каждый элемент <li> располагался рядом друг с другом с огромной горизонтальной полосой прокрутки, все отображается в виде блока, то есть отображается вертикальная полоса прокрутки.

Мне было интересно, имеет ли окно максимальный предел ширины, который не может превышать, или это просто небольшая проблема css?

Answer 1

Это свойство css, а не проблема.По умолчанию переполнение будет перенесено, поэтому будет отображаться в новой строке.Это ожидаемое поведение, так как вы хотите, чтобы ваш текст (например, внутри тега <p>) отображался в новых строках, когда они достигают правого края своего родителя.поэтому, чтобы удалить перенос, вам нужно изменить свойство пробела в вашем css:

ul{ white-space: nowrap; }

Пример нестандартного переноса можно увидеть в блокноте.Вам нужно выбрать «Перенос текста», если вы хотите избавиться от горизонтальных полос прокрутки.

jsFiddle здесь

Answer 2

Попробуй свои li с:

.slide{
    float:left;
    width:200px;
    height:540px;
    list-style:none;
}

ul .slide:last-child {
    clear:both;
}