So fügen Sie eine Grenze, um nur den Prozentsatz der Breite des Elements, CSS-Trick
Die Frage...
Wieder einmal bin ich auf der Suche für einen coolen CSS-trick, um mir zu helfen, um die Wirkung erzielen, ohne dass die Verwendung von unsauberen HTML...
Folgende Bild zeigt, was ich versuche zu erreichen, beachten Sie die oberen und unteren Grenzen nur stretching rund 70% der Breite...
Ausgangspunkt
Als Ausgangspunkt die ich erstellt habe, die oben mit, was ich nennen würde "unordentlichen HTML' hinzufügen diese Teiler auf der Liste.
Hier mein jsFiddle: http://jsfiddle.net/E93UE/
Sie werden sehen, ich habe <li class="divider><!-- Divider --></li>
, das ist, was ich loswerden will, wenn möglich
Meine Frage
Also, wenn das oben noch nicht erklärt gut genug ist, würde ich gerne einen Rahmen um ein block-element, aber nur die Grenze für eine bestimmte Breite des gesamten Elementes.
Offensichtlich kann dies nicht erreicht werden, mit nur border:XXX
ist es wahrscheinlich brauchen einige :before
und :after
Selektoren...
Mögliche Lösungen...
Habe ich zwei Gedanken, wie dies erreicht werden könnte, ist nicht allzu praktisch, und die anderen, ich bin auch nicht sicher, wie zu implementieren (sind nur Ideen):
- Legen Sie die Breite der Liste element, und geben Sie es
overflow:visible
alle Elemente innerhalb habenposition:absolute
und dann einfach die Ränder zu bringen, die Elemente aus der Liste im Feld... (nicht eine gute Lösung, mein lieber original) - Die andere Lösung, die ich bin nicht allzu sicher, wie Sie zu implementieren, kann der Weg zu gehen. Durch zwei
:before
Elemente mitposition:absolute
könnten Sie überlagern sich die Ränder jeder Grenze (ich denke)
- testen Sie es mit einem css3-transparenter Farbverlauf 🙂
- Ich weiß nicht besonders wollen, verwenden CSS3 für diese, wie es braucht, um browser-kompatibel. Zudem kann ich nicht sehen, wie transparent, Farbverlauf, könnte hier helfen...
- Was bedeutet "browser-kompatibel" zu bedeuten? Als in der, welche Browser/ - Versionen?
- Entschuldigung, ich meine die Lösung muss funktionieren in älteren Browsern wie, ich wage es zu sagen, IE8+
- Können Sie den start des Gradienten mit Prozent und das Ende... aber das war nicht die Frage..
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich neu erstellt Ihre Teiler mit
:before
/:after
pseudo-Elemente:http://jsfiddle.net/thirtydot/E93UE/1/
Die zahlen, die Nachbesserung benötigen, und Sie müssen, um es zu testen, wenn Sie mehr text, aber es ist wahrscheinlich nahe genug. Ich andere änderungen vorgenommen, um diese Lösung funktionieren, vergleichen Sie Ihr original-demo zu mir.
:first:child
ist CSS3 und wird nicht unterstützt in IE 8 (glaube ich)?:first-child
ist CSS2 und funktioniert im IE8,:last-child
ist CSS3 und funktioniert nicht in IE8.Geben eine Grenze
:after
pseudo-element (demo)::after
element ist nicht anzuwenden, die Marge relativ zu dem Schwebekörper -...border-bottom: 1px solid black;
.