Faire un <ul> liste responsive - dernier <li> pas flottant à gauche
Je suis en train de faire une liste non-ordonnée sensibles par la modification de l'état de la flotte en fonction de la taille de l'écran.
J'ai commencer avec tous li flottant à gauche. Au 520px je veux le troisième li seul à ne pas flotter, j'applique donc float:none pour que l'on. Cependant, ce qui provoque le quatrième li de ne plus flotter, et il suffit de rajouter un float:left à la quatrième li n'a pas d'effet.
<head>
<style>
ul {list-style-type:none;}
ul li {width:100px;float:left;}
@media screen and (max-width:520px) {
ul li#three {float:none;}
ul li#four {float:left;}
}
</style>
</head>
<body>
<ul>
<li id = "one"> Menu One </li>
<li id = "two"> Menu Two </li>
<li id = "three"> Menu Three </li>
<li id = "four"> Menu Four </li>
</ul>
</body>
InformationsquelleAutor OneBigEgg | 2014-06-07
Vous devez vous connecter pour publier un commentaire.
Votre
<li>
s sont déjà floatting selon votre CSS.Si l'idée est de transformer votre li sur 2 lignes, ce qui est amplement suffisant:
DÉMO
La troisième
li
ne flottent plus, parce que, vous êtes à la suppression de son flottant de la propriété. doncli
obtiendrez ses propriétés par défaut et d'acquérir la largeur de son parentPour votre problème, vous devez modifier le css comme ceci :
Découvrez ce violon : Violon lien
Si je comprends votre problème correctement, votre 3ème élément de la liste devient un clearfix dans cette instance. Le 4ème élément flotte encore mais en dessous de la 3ème.
Si vous voulez le 4ème élément continuent de flotter à côté de l'autre deux ce serait une solution:
HTML
CSS
http://jsfiddle.net/8cuPB/
Si vous ne voulez pas à attribuer à un élément flottant de ne pas définir float:none. Parce que par la mise en float:none sur les éléments qui ont été précédemment flotté), ce sont les causes de ces éléments à empiler les uns sur les autres pour ces tailles d'écrans. Le flottant perviously causé les éléments de la ligne de côte-à-côté.
Alors gardez vos ul #trois classe vide ou de la supprimer. Il donnera le même résultat que tu attendais que je crois.