Erstellen Sie ein Rohr durch Trennzeichen CSS
Dienstag, 9. September, 2008 Oft finden Sie eine Reihe von Links verteilt waagerecht, getrennt durch ein Pipe "|", das Bildzeichen dell'asticella vertikale. Außerdem, wenn Sie über gute Schreiben von HTML, werden Sie feststellen, dass diese Reihe von Links - scheinbar horizontalen - andere sind nicht wetten, dass Listen UL oder OL Das Ergebnis ist, dass anstelle des Schreibens:
Es wäre besser zu nutzen:
Aber fügen Sie die Leitung wie ein schmutziger Code so sauber. Wir können Sie einen alternativen Rand, durch den Code:
- ul li (
- ; list-style: none;
- ; float: left;
- 12px; padding: 0 12px 0 12px;
- border-right: 1px solid # 666;
- )
Erste Schritte:
Wir sehen zwei Probleme: das erste Glied hat die padding auf der linken Seite und der letzte Link hat die Leitung, um sein Recht, nicht das, was sieht gut aus! Damit kann verwendet werden, :first-child :last-child CSS2, grafischen Format für unsere Liste. Mit dem folgenden Style Sheet über den HTML-Code angezeigt vor:
- ul li (
- ; list-style: none;
- ; float: left;
- 12px; padding: 0 12px 0 12px;
- border: 1px solid # 666;
- )
- / * Entfernen Sie die Polster aus der "ersten Sohn", die erste LI * /
- ul li: first-Kind (
- ; padding: 0 12px 0 0;
- )
- / * Entfernen Sie die Platine "letzte Kind", LI * /
- ul li: last-Kind (
- 0 0 12px; padding: 0 0 0 12px;
- ; border: none;
- )
Dabei Erlangung ein besseres Ergebnis:
Natürlich, so oft passiert, Augenmerk auf die Kompatibilität mit verschiedenen Browsern, vor allem Internet Explorer.
Variante zu schweben
Noch besser, wenn Sie wollen, zu vermeiden, dass die float diesen Code:
- ul li (
- ; list-style: none;
- ; display: inline;
- 12px; padding: 0 12px 0 12px;
- border-right: 1px solid # 666;
- )
- ul li: first-Kind (
- ; padding: 0 12px 0 0;
- )
- ul li: last-Kind (
- 0 0 12px; padding: 0 0 0 12px;
- ; border: none;
- )
Gleichen Ergebnis führen, zumindest auf FireFox 
Julius sagte:
Warum, nach Ihrer Ansicht nach die Syntax
<a href = "# 1" .....noch schlimmer ist
<A href = "....?In Bezug auf die Programmierung, sehe ich keinen offensichtlichen Vorteil, oder besser gesagt, ich sehe sie, aber relativ unbedeutend und trotzdem integriert. Ich bin etwas zu vermeiden?
Giovambattista Fazioli sagte:
@ Julius: Qualität der Code wir dazu neigen, schreiben die HTML nicht sucht nach der endgültigen Chart Aussehen. Daraus folgt, dass eine "Liste" von Links, die nur eine Liste, sollten aufgeführt werden, wie
UL LIDann, horizontale oder vertikale Anzeige, sollte es - in der Tat - die Aufgabe von CSS Style Sheet. Aber es ist nichts falsch mit dem Schreiben einer Folge von Link als eine Reihe von TAGADas Problem ist, dass die Beseitigung der Stylesheets, wie ist die Seite? Mit Hilfe einer Folge von TAGAgetrennt durch die Leitung, sie werden so sichtbar, auch in Ermangelung von Stylesheet. Verwenden statt eine ListeUL LIwird immer noch schön und lesbar auch ohne Stylesheet.