come avere due titoli sulla stessa riga in html

Question

Voglio avere due titoli h2 e h3 sulla stessa regola orizzontale uno a sinistra e l'altro a destra. Hanno un HR sotto di loro e voglio che siano alla stessa distanza da questa HR.

Ho provato a renderli entrambi in linea e avere un galleggiante a destra e l'altro a sinistra. Il problema nel fare ciò era con h3 poiché è più piccolo di h2 in verticale era centrato a metà della lunghezza di h2.

h2 era un po 'come stare seduti sull'hr e h3 sembrava un po' fluttuare a mezz'aria.

Ho voluto che fossero come se fossero seduti all'ora.

h2{ 
display:inline; 
float:left; 
} 
h3{ 
display:inline; 
float:right; 
} 

Stavo parlando di descrivere visivamente la situazione.

Answer 1

Avresti bisogno di avvolgere le due rubriche in un tag div, e avere quel tag div usare uno stile che fa clear: both. per esempio:

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

Avere la hrdopo il tag div farà in modo che si è spinto al di sotto sia le intestazioni.

O qualcosa di molto simile a quello. Spero che questo ti aiuti.

Answer 2

Dovreste solo bisogno di fare una delle:

• li rendono entrambi inline (o inline-block)
• loro Impostare float sinistra oa destra

Si dovrebbe essere in grado di regolare la height, padding o margin proprietà dell'intestazione più piccola per compensare il suo posizionamento. Raccomando di impostare entrambe le intestazioni per avere lo stesso height.

Vedere questo live jsFiddle per un esempio.

(codice della 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

La proprietà vertical-align Css Dovrebbe aiutare qui:

vertical-align: bottom; 

è quello che vi serve per una più piccola intestazione :)

Vertical-Align

Answer 4

Controllare la mia soluzione del campione

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

Questo dividerà la tua pagina in due e inserirà i due elementi di intestazione si adatta alla parte destra e sinistra ugualmente.

Answer 5

Il seguente codice consente di avere due titoli sulla stessa riga, il primo allineato a sinistra e il secondo allineato a destra, e ha il vantaggio di mantenere entrambi i titoli sulla stessa linea di base.

La parte HTML:

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

E il 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); 
}