Wie kann ich eine Linie nach meinem text an die Breite des Containers?

Ja, ich bin ein newb, so gehen Sie bitte einfach. Ich weiß, dass es mehrere Wege dies zu erreichen. Im Grunde habe ich versucht zu kommen mit einer konsistenten Weg, um einen header mit einer Zeile nach dem text, der ausgeführt wird, um die volle Breite eines container-Elements.

Etwas wie dieses:

This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container

Ich versuche zu erstellen .line-Klasse verwenden, die untere Grenze zum erstellen der Linie ist, aber ich habe schon erfolglos auf die Schaffung einer Variablen Länge der Linie, erweitern die volle Breite des Containers ein.

Hier ist, was ich versucht habe:

CSS:

.line
{
    display:inline-block;
    border-bottom:2px #5B3400 solid;
    margin-left:5px;
    width:80%;
}

HTML:

    <h2>Our Mission<span class="line"></span></h2>

Natürlich ist dies nur mir, 80% der container von der linken Grenze, einschließlich der Breite des Textes. Wie kann ich eine Zeile, die beginnt, nachdem der text und die läuft über die gesamte Breite des Rahmens, unabhängig davon, wie viel text auf der gleichen Zeile?

Ich weiß, das sollte einfach sein, aber ich habe nicht in der Lage, eine Lösung zu finden noch.

Dank!

Sorry wintercounter ich bin neu auf der Website, so dass es nicht lassen Sie mich stoßen sich zwei Lösungen! 🙁 Auch unter Axel ' s Lösung, die ich Hinzugefügt die Bemerkung, dass ich mit einem strukturierten hintergrund. Ich denke, das hat mich auf die richtige Spur, ich werde einfach brauchen, um herauszufinden, den hintergrund nun ein Thema. Thx!!!

InformationsquelleAutor s.bramblet | 2013-02-20

8

DIESE METHODE WIRD die ARBEIT MIT strukturiertem HINTERGRUND (Hintergrundbild):

Können Sie versuchen, verwenden Sie stattdessen diese Methode, wenn Ihr <h2> ist auf der Oberseite des Hintergrundbildes.

HTML:
```
<h2 class="line-title"><span>This is my title</span><hr /></h2>
```
CSS:
```
.line-title {
    font-size: 20px;
    margin-bottom: 10px;
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}

/* clearfix for floats */
.line-title:after {
    content: "";
    display: table;
    clear: both;
}

.line-title span {
    padding-right: 10px;
    float: left;
}

.line-title hr {
    border:1px solid #DDD;
    border-width: 1px 0 0 0;
    margin-top: 11px;
}
```
Siehe das Beispiel hier: http://jsfiddle.net/yYBDD/1/

, Wie es Funktioniert:
1. den <h2> - tag dient als container für ein Schwebekörper.
2. den <span> geschwommen Links, wodurch die <hr /> Zusammenbruch der Links und füllen Sie den richtigen Raum.
3. den <hr /> wirkt als die Linie, und füllt den verbleibenden Platz auf der rechten Seite.
Das ist es! Perfekt, vielen Dank Axel! Ich habe die Zeile entsprechend meiner Schrift und Farbe angepasst .line-Titel hr {margin-top} 27px zu setzen die Linie rechts unten die Schrift " (meine Schriftgröße 28px), aber ansonsten ist dies GENAU das, was ich gesucht habe!

InformationsquelleAutor Axel
4

DIESE METHODE FUNKTIONIERT MIT SOLIDEN HINTERGRUND IN DEN FARBEN:

HTML:
```
<h2 class="line-title"><span>This is my title</span></h2>
```
CSS:
```
.line-title {
    border-bottom: 1px solid #DDD;
    font-size: 20px;
    height: 12px;
    margin-bottom: 10px;
}

.line-title span {
    background: #FFF;
    padding-right: 10px;
}
```
Können Sie sehen, ein Beispiel hier: http://jsfiddle.net/yYBDD/

, Wie es funktioniert.
1. den <h2> tag hat eine Klasse, legt fest die Höhe die Hälfte der Höhe, die der text enthält.
2. den <h2> hat eine untere Grenze, erstreckt sich auf die Breite des Eltern-Containers (da es ein block-element).
3. den <span> im inneren des <h2> hat einen weißen hintergrund, die decken den Bereich, wo der text und Rand überlappen.
4. Und schließlich die <h2>> hat einen unteren Rand, dass ein Ausgleich für die reduzierte Höhe des <h2>.
thx für diese. Mach ich lieber in der Lage sein, um eine Klasse verwenden, da es bietet ein wenig mehr Flexibilität. Diese würde ist die perfekte Lösung, leider ist meine Seite hat einen strukturierten hintergrund. Würde ich nur benötigen, um den hintergrund-Attribut, um meine textur in diesem Fall?
Wenn Sie eine textur, gibt es eine gute chance, es wird nicht line-up richtig. Diese Methode funktioniert nur mit einem soliden hintergrund.
das ist das, was ich sehe auch. thx. ich werde es weiter versuchen.
Ich habe eine andere Antwort, die verwendet eine andere Technik, die funktionieren sollte mit strukturierten hintergrund-Bilder. Check it out 😉

InformationsquelleAutor Axel

HTML:

<h2><span>Our Mission</span></h2>

CSS:

h2{
    border-bottom: 1px solid #000;
    height: 20px;
    overflow: visible;
    display: block;
    width: 100%;
}

h2 span{
    display: inline-block;
    background: #fff;
    height: 21px;
}

Diese Weise werde überlauf an der unteren Grenze, wie es hat größere Höhe.

Demo: http://jsfiddle.net/afuzk/

Aktualisierten code und fügte hinzu, jsfiddle link.
gute Lösung thx! Sie und Axel sind auf der gleichen Wellenlänge!

InformationsquelleAutor wintercounter

1

Könnten Sie flexbox, dies zu tun.

http://jsfiddle.net/eHHep/ (Präfixe nicht im Lieferumfang enthalten)
```
<h1 class="lineme">This is my header</h1>

<h2 class="lineme">This is another header</h2>

.lineme {
    display: flex;
}

.lineme:after {
    display: block;
    content: " ";
    border-bottom: 1px solid;
    flex: 1 1 auto;
}
```
Vorteile gegenüber anderen Methoden:
- Kein zusätzliches markup erforderlich
- Hintergrundfarbe ist nicht erforderlich
Seiten:
- Unterstützung für flexbox ist niedrig wegen der IE10 wird der erste IE, um es zu unterstützen (siehe http://caniuse.com/#search=flexbox)
- Ihre Linie geht Weg, wenn der text Sie umfließt
InformationsquelleAutor cimmanon
0

Hier ist etwas, was ich versucht, und das funktionierte:

HTML
```
<h2>Our Mission</h2>
```
CSS
```
h2:after
{
    content:       "\00a0";
    border-bottom: solid 2px black;
    position:      fixed;
    top:           0;
    width:         100%;
    margin-left:   3px;
}
```
JS Bin, um zu testen: http://jsbin.com/ayuvuc/4

thx, das sah toll aus in Ihrem test aber nicht für mich arbeiten. ich bin auf css 2.1 und zu versuchen, um die Kompatibilität mit einigen älteren Browsern - ist 'display:box' css 3.0-Attribut? könnte ich implementieren diese in css 2.1?
Sie brauchen nicht, dass display Eigenschaft. Versuchen Sie, ohne es... 🙂

InformationsquelleAutor Leniel Maccaferri

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.