Navigation bar <ul> anstelle der Tabelle

Weiß ich, dass Tabellen in html als Teil des Layouts ist eine schlechte Praxis, und so würde gerne wissen, wie man Stil Beispiel können Sie sehen, hier mit der <ul> - element anstelle einer Tabelle. Alle Abstände und Schriftgrößen müssen, bleiben die gleichen.

Jede Hilfe wäre sehr geschätzt werden.

  • Ich habe versucht, mit Hilfe von display: inline, aber das hat nicht funktioniert
  • Wenn Sie fügen Sie den HTML-und CSS, die Sie bisher ausprobiert haben, dann bieten wir einige Konstruktive Ratschläge.
InformationsquelleAutor jacktheripper | 2012-01-30
  1. 3

    Dies ist, wie ich es tun würde:

    (Die Idee ist, die box-sizing - Eigenschaft, um in der Lage sein width: 25% sicher.)

    HTML:

    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

    CSS:

    #nav {
    font-size: 20px;
}

#nav li {
    border-left: 1px solid #C3C3C3;
    float: left;
    width: 25%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#nav li:first-child {
    border: none;
}

#nav a {
    display: block;
    color: inherit;
    text-decoration: none;
}

    Live-demo: http://jsfiddle.net/dLBYe/8/

    • Schön, +1 für border-box
    • Ja, kann nicht warten, bis Firefox endlich fallen die -moz- Präfix.
    InformationsquelleAutor Šime Vidas
  2. 1

    Wie dieses Beispiel (kein JavaScript notwendig): jsFiddle

    HTML:

    <ul>
    <li onclick="window.location.href='#';">Home</li>
    <li onclick="window.location.href='#';">About</li>
    <li onclick="window.location.href='#';">Gallery</li>
    <li onclick="window.location.href='#';" style="border:none">Contact</li>
</ul>

    CSS:

    body {
    padding:0;
    margin:0;
}
ul {
    display:inline;
    font: 20px Arial, sans-serif;
}

li {
    float:left;
    width:24%;
    text-align:center;
    border-right: 1px solid #c3c3c3;
    list-style:none;
    cursor:pointer;
}

    BTW Sie hatte einen kleinen Fehler in deiner CSS-Datei für die schriftart, die ich behoben, in der jsFiddle.

    • Diese onclick Attribute verletzen TROCKEN.
    • wow fast genau das gleiche habe ich, gut 🙂
    • Vidas: ich bin gerade wieder über das, was der OP geschrieben. Es ist nicht das, was ich tun würde, und die OP hat nie gesagt, das es benötigt, um TROCKEN zu werden Stil. Ich denke, er ist mehr daran interessiert, im layout als JavaScript.
    • unheimlich ähnlich...
    • 1. Warum display:inline auf ul? 2. Warum sind Sie mit inline-styles? 3. Warum bist du nicht Umgang mit Ihr schwimmt richtig? 4. Warum sagen Sie kein javascript notwendig, wenn es offensichtlich braucht es window.location.href?
    • Display:inline ist optional und macht einfach den nav/menu-passen besser in einigen layouts. Ich bin nur über einen inline-Stil auf den letzten Punkt der Liste, um loszuwerden, die Grenze. Natürlich könnten Sie die Verwendung von JavaScript oder CSS3-Attribut auch tun. Ich habe keine Ahnung was du damit meinst, warum bin ich nicht Umgang mit floats korrekt-bitte erklären.Das Fenster.Lage.href-code ist von der OP und nicht von mir.
    • Nicht onclick="window.location.href='#'" genau das gleiche wie href="#"? Ich würde empfehlen, gegen die Verwendung entweder. Wenn Sie brauchen links, die nichts tun, der beste Weg ist, die Seite zu bedienen, mit einer richtigen href und dann entweder erfassen Sie die Veranstaltung mit JS und/oder ersetzen Sie die href mit JS zu javascript:void(0). Immer daran denken, Ihre wichtigsten Besucher hat javascript deaktiviert.
    • display: inline wird-es passt besser in einigen layouts? Inline-style ist nicht notwendig, wenn man die Grenze auf der linken Seite und entfernen Sie die erste Grenze mit first-child (CSS2) und wenn Sie nicht wissen, über die Lichtung schwebt dann noch read this.
    • Kein problem. Ich bin nur darauf es heraus.
    • Aufgefallen ist in diesem Fall die onclick ist in ein li-tag, die href funktioniert nicht im.

    InformationsquelleAutor j08691
  3. 1

    Live-Demo: http://jsfiddle.net/dLBYe/9/

    HTML:

    <ul class="navbar">
    <li onclick="window.location.href='#'">Home</li>
    <li onclick="window.location.href='#'">About</li>
    <li onclick="window.location.href='#'">Gallery</li>
    <li onclick="window.location.href='#'">Contact</li>
</ul>

    CSS:

    .navbar {
    width: 100%;
    font: 20px, Arial, sans-serif;
}

.navbar > li {
    width: 25%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    border-left: 1px solid #C3C3C3;
    cursor: pointer;
    text-align: center;
}

.navbar > li:first-child {
    border: none;
}

.navbar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
    • würde ich gehen für einen border-left zu setzen grenzt dann .navbar > li:first-child{border:none} entfernen des ersten li der Grenze zu vermeiden, mit zusätzlichen Klassen.
    • display: inline-block ist nicht in allen Browsern unterstützt
    • Dank Joseph, aktualisiert meine Antwort
    • Einstellung der Breite zu 24% ist suboptimal. Beachten Sie, dass können Sie sicher setzen Sie es auf 25% wenn Sie zusätzlich box-sizing zu border-box.
    • Sind Sie sicher, ich habe es versucht und es scheint nicht zu funktionieren: jsfiddle.net/dLBYe/7
    • Sind Sie mit Firefox? Wie jetzt, ein -moz-box-sizing Kopie ist nötig, da Mozilla noch Umschalten auf den standard-Namen.
    • Es gibt jedoch ein anderes problem in der demo. Wenn Sie inline-block es werden die Abstände zwischen den einzelnen Elementen (ein paar Pixel), was bedeutet, dass Sie möchten, um mit float:left statt. Lesen Sie hier: stackoverflow.com/questions/5078239/...
    • Vielen Dank nochmal, ich aktualisierte meine Antwort.

    InformationsquelleAutor Alp
  4. 0

    Gegeben eine Liste die wie folgt es gibt zwei Möglichkeiten, die ich kenne.

    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

    Können Sie verwenden, schweben, Links/rechts

    li {
    float: left; /* or right */
}

    Oder display inline/inline-block (n.b. dieser Weg führt zu problematischen Dimensionierung)

    li {
    display: inline; /* or inline-block */
}

    Können Sie verändern die padding /margin /Breite entsprechend sehen demo

    Edit: Vollständiges Beispiel ohne Verwendung der Rand-Größe demo

    ul {
    display: block;
    width: 100%;
}

li {
    border-left: solid 1px black;
    float: left;
    margin-right: -1px;
    text-align: center;
    width: 25%;
}

ul li:first-child {
    border-left: none;
}

ul li:last-child {
    margin-right: 0;
}

    Beispiel mit display: table ist jetzt eine Dritte Möglichkeit, die ich kenne um diesen Effekt zu erreichen 🙂 demo

    ul {
    display: table;
    width: 100%;
}

ul li:first-child {
    border-left: none;
}

li {
    display: table-cell;
    border-left: solid 1px black;
    text-align: center;
    width: 25%;
}
    • das funktioniert nicht mit Grenzen, denn die Breite wäre etwas mehr als 100%
    • Wie gesagt die OP verändern kann, padding oder margin oder die Breite zu passen, Sie könnten auch box-sizing: border-box oder margin-right: -Npx etc viele Optionen, nichts ist jemals endgültig aktualisiert fiddle um zu veranschaulichen,
    InformationsquelleAutor T I
Schreibe einen Kommentar