Comment écrire à la fois h1 et h2 sur la même ligne ?

Question

J'ai une page et je veux simplement faire un en-tête. Cet en-tête est un <h1> aligné à gauche, et un <h2> aligné à droite, dans la même ligne, et après eux, un <hr> . Mon code se présente jusqu'à présent comme suit (si vous le testez, vous verrez qu'il est faux) :

 <h1 align="left">Title</h1> 
<h2 align="right">Context</h2> 
<hr/>

Merci les gars!

Answer 1

h1 et h2 sont des éléments natifs display: block .

Faites-en display: inline pour qu'ils se comportent comme du texte normal.

Vous devez également réinitialiser les valeurs par défaut padding et margin des éléments.

Answer 2

Mot clé float :

 <h1 style="text-align:left;float:left;">Title</h1> 
<h2 style="text-align:right;float:right;">Context</h2> 
<hr style="clear:both;"/>

Answer 3

Dans de nombreux cas,

 display:inline;

est assez.

Mais dans certains cas, vous devez ajouter ce qui suit :

 clear:none;

Answer 4

Mettez les h1 et h2 dans un conteneur avec un identifiant de container puis :

 #container {
    display: flex;
    justify-content: space-beteen;
}

Answer 5

En réponse le titre de la question (trouvée par une recherche google) et non la re-question Pour arrêter le saut de ligne lorsque vous avez des balises d'en-tête différentes, par exemple

 <h5 style="display:inline;"> What the... </h5><h1 style="display:inline;"> heck is going on? </h1>

Te donnera:

Que diable se passe t'il?

et pas

 What the... 
heck is going on?