0

私は現在、単純な 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 は、隣同士ではなく、互いの下に表示されます。十分な情報を提供したことを願っています。

4

1 に答える 1

3

幅が要素の場合、100%要素はその親コン​​テナーの全幅を占有します。つまり、別の要素が同じ行を占有するli余地がありません。次の兄弟を次の行にli明示width的に強制します。

これを回避するには、次のマークアップが与えられた場合の 1 つのオプション:

<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、要素が単一の「行」に保持され、要素と要素に100%幅が割り当てられ、要素がインラインとして表示されます。liimgli

于 2013-03-16T14:29:06.083 に答える