html - 当宽度不固定时，Li 项目会显示在彼此下方而不是旁边

Question

我目前真的很忙于制作一个简单的 jQuery 幻灯片，但是当我将幻灯片设为固定宽度时，我遇到了以下问题：

#slider ul {
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}

#slider ul li {
float:left;
height: 100%;
width:200px;
}

一切正常；但是当我想让我的滑块全屏显示时。所以而不是宽度 200

width:100%;

所有 li 都显示在彼此下方而不是彼此相邻。我希望我提供了足够的信息。

Answer 1

如果宽度是100%元素li占据其父容器的整个宽度，意味着没有空间让另一个li元素占据同一行；显width式强制下一个兄弟到下一行。

为了解决这个问题，一个选项，给出以下标记：

<ul>
    <li>
        <img src="http://lorempixel.com/500/500/nightlife/Some%20sample%20text" />
    </li>
    <li>
        <img src="http://lorempixel.com/500/500/sports/Some%20sample%20text" />
    </li>
</ul>

是使用：

ul {
    white-space: nowrap;
}

li,
img {
    width: 100%;
}

li {
    display: inline-block;
}

JS 小提琴演示。

这强制ul将元素保留在单个“行”中，为 and 元素分配宽度，并将100%元素显示为内联。liimgli