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;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </li>
<li style="float:left; display:block; width:100px; height:100px; margin:0 20px 0 0; background-color:black;"> </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"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 100px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 200px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 300px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 400px;" class="ui-carousel-element ui-widget-content"> </li>
<li style="width: 80px; height: 80px; position: absolute; top: 20px; left: 500px;" class="ui-carousel-element ui-widget-content"> </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 |
Vous devez vous connecter pour publier un commentaire.
Ajouter
position: relative
à la.ui-carousel
dans votre deuxième approche. Éléments en position absolue de l'écoulement. Si vous n'avez pas relativement position de laul
, les éléments de la liste sont positionnés par rapport à la fenêtre d'affichage, en ignorant le dépassement de leur parent.Aussi, vous pouvez supprimer le
display: block
sur les éléments de la liste. La propriété d'affichage est largement ignoré sur les flotteurs.OriginalL'auteur
Je ne vois pas un display:hidden ajouté dans votre deuxième approche...
La propriété overflow doit être mis sur le parent
<ul>
pour le débordement de la liste des éléments cachés.Et pour votre première approche, je vous recommande d'utiliser un externe
<div>
. Ce serait de la boîte englobante, cachant débordant li-éléments.Ensuite appliquer à l'élément de la liste des styles comme avant, avec des chars et des blocs.
Aussi l'emballage jusqu'à <ul> dans un <div> semble redondant, ne devrait pas l'ul avec display:block se comportent de la même façon ?
OriginalL'auteur