Ich brauche eine Navigationsleiste, mit dem Symbol "|" zwischen den einzelnen Links. Ich habe versucht,Hinzufügen eines Symbols nach jedem Element in CSS
.navbar li::after { position:absolute; content:" | "; }
mit Aber ich am Ende immer das erste Symbol unter dem Link bekommen, ich weiß nicht, warum.
Ich habe auch versucht border-right und border-left verwenden, aber das sieht sehr hässlich und gibt mir zwei Linien für jedes Element.
hier ist, wie ich in der Regel dieses Gebäude tun auf Ihrer border-right-Lösung: fiddle
HTML:
I umfassen eine Spanne, die Grenze anzuwenden, wie es heißt, die Grenze behält die Höhe des Textes. Wenn Sie der Liste ein Padding hinzufügen möchten, wenden Sie horizontales Padding auf das Li und vertikales Padding auf den Bereich an.
<ul>
<li><span>Link 1</span></li>
<li><span>Link 2</span></li>
<li><span>Link 3</span></li>
</ul>
können Sie verwenden: first-Kind die Grenze zu entfernen, die auf den ganzen Weg funktionieren sollte zurück IE8
CSS:
ul{
padding:0px;
margin:0px;
}
li {
list-style:none;
display:inline-block;
padding:10px 0px;
}
span {
padding:0px 10px;
border-left:1px solid red;
display:inline-block;
}
li:first-child span {
border-left:none;
}
ich mit Christopher Thomas Verfahren voll und ganz zustimmen Es ist eigentlich ziemlich clever. Ich dachte an eine andere Möglichkeit, wie Sie es tun könnten.
Setzen Sie die Links in drei separate Absätze und machen Sie zwei divs, die die Linien sein werden. Dann können Sie sie noch separat formatieren, um wie Linien zu sehen.
Die Linien sind nicht perfekt vertikal eingegeben, aber es ist das Beste, was ich in fünf Minuten tun kann.
div {
background: #fe89d7;
width: 1px;
height: 15px;
display: inline-block;
}
p {
display: inline-block;
padding: 15px;
} <body>
<p>Link 1</p>
<div></div>
<p>Link 2</p>
<div></div>
<p>Link 3</p>
</body>
Es sieht auf meinem comp in Ordnung. Ich würde die absolute Position deaktivieren. Können Sie einen Link bereitstellen, über den wir Ihnen bei der Problembehandlung helfen können? – Vcasso
Nicht wirklich, es könnte gut auf Ihrem PC aussehen, weil ich Logo auf der linken Seite der Navbar habe, weiß ich nicht, ob das aber wichtig ist –
Ich nehme an, Sie erhalten 2 Zeilen, weil Sie Grenze-rechts UND Grenze-links verwenden? Vielleicht einen von beiden benutzen? – Flink