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

尝试浮动您的li：

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

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

Answer 2

这是一个css属性而不是问题。默认情况下，溢出将被包装，从而在新行上呈现。这是预期的行为，因为您希望文本（例如在<p>标记内）在新行上显示，当它们到达其父级的右边缘时。

这是所有元素的默认值，因此要删除换行，需要更改css中的空格属性：

ul{ white-space: nowrap; }

在记事本中可以看到非默认包装的示例。如果你想摆脱水平滚动条，你需要选择“换行”。

jsFiddle here

列表显示为块而不是内联块

2 个答案: