wie zwei Überschriften auf der gleichen Linie in html haben

Question

Ich möchte zwei Überschriften h2 und h3 auf der gleichen horizontalen Regel eine auf der linken Seite und die andere auf der rechten Seite haben. Sie haben eine HR unter ihnen und ich möchte, dass sie in derselben Entfernung von dieser HR sind.

Ich habe versucht, sie beide inline machen und haben einen Schwimmer rechts und den anderen links. Das Problem dabei war mit h3, da es vertikal kleiner als h2 ist und mit der Hälfte der h2-Länge zentriert war.

h2 war ein bisschen wie sitzen auf der hr und h3 irgendwie sah aus wie in der Luft schweben.

Ich wollte irgendwie, dass sie wie beide sitzen auf der hr.

Ich sprach über visuelle Beschreibung der Situation.

Answer 1

Sie müssten die beiden Überschriften in einem div Tag wickeln, und Verwenden Sie dieses div-Tag mit einem Stil, der clear: both ist. z:

<div style="clear: both"> 
    <h2 style="float: left">Heading 1</h2> 
    <h3 style="float: right">Heading 2</h3> 
</div> 
<hr /> 

die hrnach der div Tag wird dafür sorgen, dass es unter den beiden Header geschoben zu haben.

Oder etwas sehr ähnliches. Hoffe das hilft.

Answer 2

sollten Sie brauchen nur eine der tun: sie beide

• Make inline (oder inline-block)
• sie float links Set oder rechts

Sie sollten die anpassen können, height, padding oder margin Eigenschaften des kleineren Kurses, um seine Positionierung zu kompensieren. Ich empfehle, beide Überschriften auf height zu setzen.

Siehe dieses live jsFiddle für ein Beispiel.

(Code des jsFiddle):

CSS

h2 { 
    font-size: 50px; 
} 

h3 { 
    font-size: 30px; 
} 

h2, h3 { 
    width: 50%; 
    height: 60px; 
    margin: 0; 
    padding: 0; 
    display: inline; 
}​ 

HTML

<h2>Big Heading</h2> 
<h3>Small(er) Heading</h3> 
<hr />​ 

Answer 3

Die Css vertical-align Eigenschaft sollten Sie hier aushelfen:

vertical-align: bottom; 

ist, was Sie für Ihre kleineren Kopf brauchen :)

Vertical-Align

Answer 4

meine Probelösung

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5> 
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5> 

prüfen

Dies teilt Ihre Seite in zwei und fügen Sie die zwei Header-Ele rechten und linken Teil gleichermaßen.

Answer 5

Der folgende Code ermöglicht es Ihnen, zwei Überschriften in derselben Zeile zu haben, die erste linksbündig und die zweite rechtsbündig, und hat den zusätzlichen Vorteil, dass beide Überschriften auf derselben Grundlinie bleiben.

Die HTML-Teil:

<h1 class="text-left-right"> 
    <span class="left-text">Heading Goes Here</span> 
    <span class="byline">Byline here</span> 
</h1> 

Und die CSS:

.text-left-right { 
    text-align: right; 
    position: relative; 
} 
.left-text { 
    left: 0; 
    position: absolute; 
} 
.byline { 
    font-size: 16px; 
    color: rgba(140, 140, 140, 1); 
}