Doppelte Ränder mit verschiedenen Breiten

-1

Ich versuche, eine doppelte Grenze wie unten gezeigt mit CSS - zu implementieren, idealerweise ohne Verwendung zusätzlicher Elemente.Doppelte Ränder mit verschiedenen Breiten

Mein erster Gedanke wäre die erste Grenze zum Containerelement aufzubringen, und die zweite auf das Titelelement unten.

.box { 
 
    border-top: 1px solid black; 
 
} 
 
h2 { 
 
    float: left; 
 
    border-top: 2px solid red; 
 
    margin-top: 0; 
 
    padding-top: 10px; 
 
    padding-right: 5px; 
 
}

<div class="box"> 
 
    <h2>Title</h2> 
 
    <p>Some text here</p> 
 
</div>

Das hier Hauptproblem ist, dass die Forderung, dass die Breite des kleinen Grenz indepedent ist von der Breite des Textes sein kann. Es kann auch zu Problemen mit Zeilenhöhe/vertikaler Textausrichtung kommen.

Gibt es andere praktikable Lösungen für dieses Problem?

Quelle

2016-12-09 George Katsanos

Fragen Sie, wie Sie hier die zweite Grenzlinie auf die volle Breite des Elternteils bekommen? So habe ich Ihre Frage in meiner Antwort unten interpretiert. – connexo

Ich frage, wie Sie die Grenzen wie im Bild gezeigt implementieren. (Farbe nicht berücksichtigt) –

Mit mindestens minimalen Kenntnissen über CSS sollten Sie in der Lage sein, die ':: before' Lösung selbstständig an Ihre tatsächlichen Bedürfnisse anzupassen. Da Sie nun Ihre Anforderungen geklärt haben, habe ich die angepasste ':: before'-basierte Lösung zu meiner Antwort hinzugefügt. – connexo

-1

Ich hoffe der folgende CSS-Code wird Ihnen helfen.

.box{ 
    border-top: 2px solid gray; 
} 

h2{ 
    width: 200px; 
    height: 300px; 
    border-top: 2px solid red; 
    position: absolute; 
    top: -12px; 
}

Quelle

2016-12-09 12:34:12

Bitte verwenden Sie den Link [Bearbeiten] erklären, wie dieser Code funktioniert und geben Sie nicht nur den Code, da eine Erklärung ist wahrscheinlich, zukünftige Leser zu helfen. –

Doppelte Ränder mit verschiedenen Breiten

Antwort

Verwandte Themen