overflow:hidden ne fonctionne pas pour li éléments à l'intérieur d'ul

Je suis en train de créer un carrousel de ul objet où les li sont des éléments de blocs et ul est le carrousel contenant.
J'ai essayé les deux approches, mais neather semble fonctionner, la propriété overflow ne fonctionne pas comme je veux.

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

Le problème avec cette approche est que les éléments ne sont pas pile à l'horizontale quand ils débordement (qui est ce que je veux/prévu). Je suppose que c'est en raison de l'display:block dans le li éléments, mais ils ont besoin d'avoir fixé la largeur/hauteur, est-il un moyen de contourner cela ?

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

- Je utiliser javascript pour distribuer le li éléments et définir leurs positions absolues, mais alors le overflow:hidden propriété est "ignoré", car li éléments encore à l'extérieur de l'ul conteneur des limites.

Donc, la question est de savoir comment obtenir de l'ul à l'horizontale pile de taille fixe li blocs et masquer celles qui débordent ?

OriginalL'auteur |