Machen Sie eine <ul> Liste reaktionsschnell Weg - last <li> nicht verschiebbar Links

Ich versuche, eine ungeordnete Liste reaktionsschnell Weg, indem der status der Schwimmer je nach Bildschirm-Größe.

Starte ich mit allen li schwebt nach Links. Bei 520px ich will die Dritte li nur nicht schwimmen, so dass ich mich bewerben float:none zu, dass man. Dies führt jedoch zu der vierten li nicht mehr schwimmen, und einfach hinzufügen ein float:left für das vierte li hat keine Wirkung.

<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

    Ihre <li>s sind schon floatting nach Ihren CSS.

    Wenn die Idee ist, schalten Sie Ihren li auf 2 Zeilen, das ist reichlich genug:

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

    DEMO

    InformationsquelleAutor G-Cyr
  2. 0

    Dritten li wird kein float mehr da, Sie sind lösche seine schwimmende Eigenschaft. so li erhalten Ihren Standard Eigenschaften und erwerben die Breite des übergeordneten

    Für Ihr problem müssen Sie zum ändern der css wie dieses :

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

    Check out this fiddle : Fiddle link

    InformationsquelleAutor tejashsoni111
  3. 0

    Wenn ich verstehe dein problem richtig, Ihre 3. element in der Liste wird ein clearfix in diesem Fall. Das 4. element noch schwimmt, aber unter dem 3.

    Wenn Sie möchten, das 4. element zu noch schweben neben den beiden anderen wäre es eine Lösung:

    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

    Wenn Sie nicht möchten, weisen Sie jedem floating-Elements nicht setzen float:none. Weil durch die Einstellung float:none auf die Elemente (die zuvor schwebte), dies bewirkt, dass diese Elemente auf stack auf der jeweils anderen für diejenigen, die Größen der Bildschirme. Die schwimmende bislang wurde verursacht die Elemente, um eine Linie von Seite zu Seite.

    So halten Sie Ihre ul #drei-Klassen einfach leer oder entfernen Sie es. Wird es geben, das gleiche Ergebnis, wie erwartet, glaube ich.

    InformationsquelleAutor Suresh Ponnukalai
Schreibe einen Kommentar