HTML/CSS erstellen Sie eine Liste in Zeilen, 3 Boxen pro Zeile?

<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

Let ' s sagen, jede box ist 150px breit, so dass die Gesamtbreite pro Zeile 450px.
Was ich versuche zu tun ist, automatisch der Liste können Sie nur 3 Boxen (Liste der Elemente) pro Zeile, und nicht gehen Sie unter einander.

Habe ich versucht, etwas, und nicht nur zu Fragen, bevor Sie versuchen!

Es ist mein Versuch:

<div class="container">
    <ul>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
    </ul>
</div>

.container {
    width: 450px;
}

.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

.container ul {
    display: inline;
}

Ergebnis:

img http://gyazo.com/fc8367ed762c25b29abb94a1e31e4da4.png

Es funktioniert nicht so wie ich wollte, warum?

Gibt es ein plugin, dass es das Leben leichter macht?

  • benötigen Sie den Platz für Ihre Felder zu sitzen versteckt. Legen Sie die ul zu haben, die Breite aller Elemente und die container haben 450px Breite, overflow hidden. Es wird nur zeigen Sie Ihre drei und halten Sie die li ' s sitzen in einer Reihe. In deinem letzten code, den Sie berechnen können, die container-Breite dynamisch, wenn die Menge der Boxen ändern.
InformationsquelleAutor Jony Kale | 2013-08-21
  1. 15

    Die Sie nicht benötigen, um die UL-Anzeige als inline-Objekt. Stattdessen machen Sie etwas wie dieses:

    .container {
    width: 450px;
}
.container ul {
    padding: 0; /* remove default padding and all margins! */
    margin: 0;
    list-style-type: none; /* remove the • */
}
.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

    Ergebnis: http://jsfiddle.net/f896G/

    • Vielen Dank, hat funktioniert!
    • Sie sind herzlich willkommen! Bitte vergessen Sie nicht, markieren Sie diese als Antwort. 🙂
    InformationsquelleAutor Leonard
Schreibe einen Kommentar