Einfache 2-Spalten-navigation mit CSS und einer Liste?

Ich bin auf der Suche, um eine zwei-Säulen-Navigationsleiste mit einem einzigen <ul> mit sechs <li> Elemente:

<nav>
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Team</li>    
    <li>Store</li>
    <li>Blog</li>
    <li>Contact</li>
    </ul>
</nav>​

Drei Elemente auf einer Seite und drei auf der anderen Seite; vertikal sortiert.

Jetzt, es ist einfach zu tun, wenn Sie zwei seperate <ul> Elemente und putting-Polsterung/Margen zwischen Ihnen: http://jsfiddle.net/Baumr/SJcjN/ — aber das ist keine gute Lösung.

Könnte auch wickeln <span> - tags um jeweils drei <li>'s — aber ist das die einzige CSS-Lösung?

Suchen für einige elegante Ideen. Danke!

InformationsquelleAutor Baumr | 2012-10-27
  1. 7
    <ul>
  <li>Home</li>
  <li>About</li>
  <li>Team</li>    
  <li>Store</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

    CSS:

    li {
  width: 50%;
  float: left;
  padding: 5px 0; 
}

    Werden Sie um so:

    Home About
Team Store
Blog Contact

    Wenn das nicht ein problem, Sie haben eine sehr einfache Lösung.

    EDIT: 

    li:nth-child(even) {
  width: 50%;
  float: right; 
}
li:nth-child(odd) {
  width: 50%;
  float: left;
}

    Diese wird, um Sie in der richtigen Art und Weise. nicht sicher, wie der IE zu handeln, aber funktioniert in allen anderen Browsern.

    oder Sie Folgen streng der UL-LI Konzept, so dass Ihr html-Code Aussehen ein Sie können so viele Spalten, wie Sie benötigen:

    <nav>
    <ul class="menuitem">
       <li class="column">
          <ul>               
            <li>Home</li>
            <li>About</li>
            <li>Team</li>
          </ul>
        </li>
        <li class="column">
          <ul>               
             <li>Store</li>
             <li>Blog</li>
             <li>Contact</li>
          </ul>
        </li>               
    </ul>

    <ul class="menuitem">
        <li class="column">
          .....
        </li>
    </ul>      

</nav>

    Machen eine richtige und gut formatierte html kann Ihr Leben leichter machen.

    • Danke, aber ja, das ist ein problem — in diesem Fall konnte ich neu bestellen, aber da dies reaktionsschnell Weg: die Bestellung wird anders/schlimm, wenn es erweitert.
    • überprüfen Sie meine änderung für eine weitere einfache Lösung 🙂
    • Immer kreativ? Schön. Danke! Könnte auch dies mit <span>'s dann nur um sicher, es funktioniert im IE...?
    • Ich denke, ich werde verwenden Sie Ihre erste Lösung für jetzt, wie meiner einer (werfen Sie einen Blick auf die andere Antwort) funktioniert problemlos, aber ist das kein Gültiger HTML-Code.
    • viele Möglichkeiten, damit es funktioniert 🙂 aber nicht nach den Regeln früher oder später wird es einige Probleme 🙂 Halten Sie es sauber und erhalten eine Bezahlung.
    • Du hast Recht. Auch bin ich mir nicht sicher, ob Ihr zweites Vorschläge für eine ul innerhalb einer ul funktioniert in meinem Fall — es ist ein responsive design, und wenn die li sind nicht in 2-3 Spalten, erscheinen Sie in einer einzigen Zeile. Auch, wenn Sie Stile deaktiviert sind, könnte es seltsam Aussehen, also nicht zu 100% semantisch korrekt?
    • Sie wissen besser Ihr design ... man kann also wählen, was gut für Sie ... diese Dinge sind nur Ideen und Sie könnten neu gestaltet werden, kombiniert und etc. je nach Ihrem design ... nur Ideen für den Anfang 🙂 viel Glück ... Ihrer Phantasie und einige Tests machen den rest 🙂
    • Danke. Ich fühle mich immer schlecht für die nicht zu geben jemand die Idee, zu versuchen, wenn Sie die Zeit nehmen, teilen Sie mit mir 😛 (Ziemlich neu hier.)

    InformationsquelleAutor Reflective
  2. -1

    Ich denke, dass mit <span>'s könnten die meisten cross-browser-freundliche Lösung.

    Es sei denn, jemand hat noch andere Ideen? Auf der Suche nach etwas mit cross-browser-kompatibel, da IE leider nicht unterstützt nth-child(N).

    Dies ist nicht so sauber (HTML Weise), wie ich wollte, mit diesen random überspannt, aber hier ist der HTML:

    <nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>

    (Beachten Sie die span innerhalb der ul — big faux pas in meinem Buch.)

    Und CSS:

    nav span {
    width: 50%;
    float: left;
}

    Aber das ist kaum eine gute Lösung... irgendwelche anderen Ideen?

    InformationsquelleAutor Baumr
Schreibe einen Kommentar