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
  1. 2

    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:

    @media screen and (max-width:520px) {
    ul li#three {clear:left;}
}

    DÉMO

    InformationsquelleAutor G-Cyr
  2. 0

    La troisième li ne flottent plus, parce que, vous êtes à la suppression de son flottant de la propriété. donc li obtiendrez ses propriétés par défaut et d'acquérir la largeur de son parent

    Pour votre problème, vous devez modifier le css comme ceci :

    ul {list-style-type:none;}
ul li {width:100px;float:left;}
@media screen and (max-width:520px) {
    ul li#three {clear:both;float:left;}
    ul li#four {float:left;}
}

    Découvrez ce violon : Violon lien

    InformationsquelleAutor tejashsoni111
  3. 0

    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

    <ul>
    <li id = "one"> Menu One </li>
    <li id = "two"> Menu Two </li>
    <li id = "four"> Menu Four </li>
    <li id = "three"> Menu Three </li>
</ul>

    CSS

    ul {list-style-type:none;}
ul li {
    float:left;
    width:100px;
    background: gray;
}
ul #three {
    float: none;
}
@media screen and (min-width:520px) {
    ul #four {
        margin-left: 100px;
    }
    ul #three {
        float: left;
        margin-left: -200px;
    }
}

    http://jsfiddle.net/8cuPB/

    InformationsquelleAutor KnutSv
  4. 0

    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.

    InformationsquelleAutor Suresh Ponnukalai