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...

So fügen Sie eine Grenze, um nur den Prozentsatz der Breite des Elements, CSS-Trick

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):

  1. Legen Sie die Breite der Liste element, und geben Sie es overflow:visible alle Elemente innerhalb haben position:absolute und dann einfach die Ränder zu bringen, die Elemente aus der Liste im Feld... (nicht eine gute Lösung, mein lieber original)
  2. Die andere Lösung, die ich bin nicht allzu sicher, wie Sie zu implementieren, kann der Weg zu gehen. Durch zwei :before Elemente mit position: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..
InformationsquelleAutor Ben Carey | 2013-07-05
Schreibe einen Kommentar