Überlauf:versteckt funktioniert nicht für li Elemente in ul

Ich versuche, ein Karussell aus ul Objekt zu erstellen, wo die li Elemente Blöcke sind und ul ist der Karussell-Container. Ich habe zwei Ansätze ausprobiert, aber ordentlich scheint zu funktionieren, die Overflow-Eigenschaft funktioniert nicht so, wie ich es möchte.

Ansatz 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>

Das Problem bei diesem Ansatz ist, dass Elemente nicht horizontal stapeln, wenn sie überlaufen (was ich will/erwartet habe). Ich vermute, dies ist aufgrund der anzeige:block in den li-Elementen, aber sie müssen feste Breite / Höhe haben, gibt es einen Weg um diese ?

Ansatz 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>

Ich verwende Javascript, um die li-Elemente zu verteilen und ihre Positionen auf absolut zu setzen, aber dann wird die overflow:hidden-Eigenschaft 'ignored', da li-Elemente immer noch außerhalb der ul-Containergrenzen angezeigt werden.

Also ist die Frage, wie man ul zu horizontal stapeln feste Größe li Blöcke und verstecken sie, die überlaufen ?

Antwort auf "Überlauf:versteckt funktioniert nicht für li Elemente in ul " 2 von antworten

Ich sehe kein Display:versteckt in Ihrem zweiten Ansatz hinzugefügt...

Die Überlaufeigenschaft muss auf dem übergeordneten <ul> for the overflowing list-elements to be hidden. festgelegt werden, damit die überlaufenden Listenelemente ausgeblendet werden.

Und für Ihren ersten Ansatz würde ich die Verwendung eines äußeren <div>. This would be the bounding box, hiding overflowing li-elements. empfehlen. Dies wäre der Begrenzungsrahmen, der überlaufende Li-Elemente versteckt.

<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>

Wenden Sie dann die Listenelementstile wie bisher mit Floats und Blöcken an.

Fügen Sie position: relative to the zum .ui-carousel in your second approach. Absolutely positioned elements are taken out of the flow. If you don't relatively position the in Ihrem zweiten Ansatz hinzu. Absolut positionierte Elemente werden aus dem Fluss herausgenommen. Wenn Sie die ul, the list items are positioned relative to the viewport, ignoring the overflow on their parent. nicht relativ positionieren, werden die Listenelemente relativ zum Ansichtsfenster positioniert, wobei der Überlauf auf dem übergeordneten Element ignoriert wird.

Außerdem können Sie das display: block on the list items. auf den Listenelementen entfernen. The display property is largely ignored on floats.