9

li 要素がブロックで、ul がカルーセル コンテナーである ul オブジェクトからカルーセルを作成しようとしています。私は2つのアプローチを試しましたが、うまくいかないようです.overflowプロパティは私が望むように機能していません.

アプローチ 1:

    <ul style="overflow:hidden; width:200px; height:120px; display:block;">
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
        <li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;">&nbsp;</li>
    </ul>

このアプローチの問題は、要素がオーバーフローしたときに要素が水平方向にスタックしないことです (これは私が望んでいること/期待していることです)。これは、li 要素の display:block が原因だと思われますが、幅/高さを固定する必要があります。これを回避する方法はありますか?

アプローチ 2:

.ui-carousel
{
    display:block;
    overflow: hidden;
    list-style: none;
}

.ui-carousel-element
{
    margin:0;
    padding:0;
    display:block;
    border:2px solid black;
    float:left;
}

<ul style="width: 200px; height: 120px; padding-top: 20px;" id="pages" class="ui-widget ui-carousel">
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 0px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
    <li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content">&nbsp;</li>
</ul>

私は JavaScript を使用して li 要素を配布し、それらの位置を絶対に設定しますが、li 要素が ul コンテナー境界の外にまだ表示されるため、overflow:hidden プロパティは「無視」されます。

問題は、ul を固定サイズの li ブロックを水平方向にスタックし、オーバーフローしたブロックを非表示にする方法です。

4

2 に答える 2

3

2番目のアプローチでdisplay:hiddenが追加されていません...

<ul>オーバーフローしているリスト要素を非表示にするには、オーバーフロー プロパティを親に設定する必要があります。

そして、最初のアプローチでは、アウターを使用することをお勧めし<div>ます。これは境界ボックスで、オーバーフローする li 要素を隠します。

<div style="overflow: hidden; width: 200px; height: 120px;">
   <ul style="height: 120px;">
      <li>Whatever</li>
      <li>More stuff</li>
      <li>Even more</li>
   </ul>
</div>

次に、フロートとブロックを使用して、前と同じようにリスト要素のスタイルを適用します。

于 2009-08-19T07:35:30.677 に答える