Wie lay-out-Liste der Elemente, wie ein raster mit CSS und HTML?

Ich habe einen div-block, die nicht nicht haben eine Feste Breite.

Innen, ich habe eine <ul> <li>..</li> block mit 11 Elementen.
Ich möchte diese <li> Elemente werden aufgeführt im inneren des div, alle mit gleicher Breite wie diese:

##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##            ##item##

Aber ich kann nicht Sortieren werden.

Versuchte ich float left und right aber der zentrale 3-Elemente werden nicht zentriert.

Was kann ich tun damit dies funktioniert?

Dank!

  • Könnte Sie das entsprechende markup und CSS? Sie wahrscheinlich müssen nur geben Sie eine Breite für jede LI.
InformationsquelleAutor Phil | 2013-02-14
  1. 26

    Den "Inline-Blocks" link, dass Jordan veröffentlicht ist eine großartige Ressource, vor allem wenn es um ältere browser zu unterstützen. Für eine schnelle Referenz für andere Landung auf dieser Seite von google, die grundlegenden css-Datei für die Erstellung einer zentrierten, inline-block-grid:

    ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}
    InformationsquelleAutor FreedomMan
  2. 15

    Die einfachste Lösung ist die Verwendung CSS-Spalten:

    http://jsfiddle.net/6tD2D/ (Präfixe nicht im Lieferumfang enthalten)

    ul {
    columns: 3;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
</ul>

    Dies wird glätten die Spalten so gut er kann. Allerdings, wenn gibt es nicht genügend Elemente, um zu werden vollkommen gleich, es wird beginnen, entfernen Sie Sie von der rechten statt von der Mitte.

    InformationsquelleAutor cimmanon
  3. 3

    Laut diese StackOverflow-Frage, Inline-Blocks kann nur, was Sie brauchen.

    Oh, und wenn Sie nicht implementieren es bereits, sicher sein, zu schauen,CSS-Grids, zu. Wenn Sie nicht möchten, bauen Sie ein CSS-grid selbst, diese eine ist fantastisch.

    InformationsquelleAutor Jordan Thornquest
Schreibe einen Kommentar