CSS-Machen-Liste-Elemente ganz Ansprechend

Stehe ich vor einem seltsamen problem. Ich habe eine nicht-nummerierte Liste der Bilder. Die Liste hat 4 Elemente. Ich möchte es im responsive Seite und alles was ich will ist, dass alle Elemente sollten über eine 25% Breite und die Liste selbst sollte erstrecken sich über die Breite des gesamten Bildschirms. Nun, es klingt einfach und straight-forward, aber für einige ungerade Grund kann ich nicht zuordnen, 25% der Breite auf der Liste-Elemente und nur drei Punkte unterbringen, in einer Linie, wenn ich zuweisen width:25%.

Wenn ich die Breite verringern, um 24.4% Einzelteile in der Linie. Aber dann wieder unheimlich, wenn ich die Größe browser einer der Artikel geht in die 2. Zeile.

Ich bin mit Google chrome. Hier ist der HTML:

<ul class="imgs">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>

        </ul>

Hier ist der CSS:

.imgs {
width: 100%;
list-style: none;
margin: auto;
    padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}

Und hier ist der Fiddle-Demo:
http://jsfiddle.net/7HXw7/2/

InformationsquelleAutor Ahmar Ali | 2014-04-02

  1. 4

    Mit inline-bock-Elemente, die der browser interpretieren die Leerzeichen zwischen den li ' s als tatsächliche Räumen und das ist der Grund, warum Ihre Elemente sind nicht Schlange. Wenn Sie nur entfernen Sie den Speicherplatz, es werden line-up. Siehe code:

    <ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

    Oder die Fiedel, hier: http://jsfiddle.net/dgvc9/

    Abwechselnd, wenn Sie diese als lästig, als würden denken, Sie tun, können Sie die li-s-block-Elemente und schweben Sie Links.

    Alternative fiddle: http://jsfiddle.net/8Gxvd/

    +1. Aber wissen Sie, der Grund, warum es passiert? Ich meine, warum Browser Verhalten sich wie diese sollte es nicht behandeln inline-Blöcke, die als Blöcke?
    Inline-blocks inline-blocks. Blöcke sind Blöcke.
    So als ob Sie ein Bild-tag zusammen mit einigen text-markup, die Leerzeichen würde interpretiert werden als Räume, weil Sie ein Bild-tag inline-block. Sie machen Ihre li ' s die gleiche Art von element Anzeige in deinem Beispiel. Dies ist die Art von inline-block-anzeigen-Typen.

    InformationsquelleAutor ezekielDFM

  2. 2

    Versuchen Sie, hinzufügen:

    float: left;

    zu .imgs li

    Fiddle

    InformationsquelleAutor Konrad Wąsowicz

Schreibe einen Kommentar