Как написать h1 и h2 в одной строке?

У меня есть страница, и я хочу просто сделать заголовок. Этот заголовок представляет собой текст <h1> выровненный по левому краю, и <h2> выровненный по правому краю, в той же строке, а после них - <hr>. Мой код до сих пор выглядит следующим образом (если вы проверите его, вы увидите, что он неправильный):

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

Спасибо, парни!

Ответ 1

Ключевое слово float:

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

Ответ 2

h1 и h2 являются нативными display: block элементами.

Сделайте их display: inline, чтобы они вели себя как обычный текст.

Вы также должны reset по умолчанию padding и margin, которые имеют элементы.

Ответ 3

Во многих случаях

display:inline;

Но в некоторых случаях вам нужно добавить следующее:

clear:none;

Ответ 4

Поместите h1 и h2 в контейнер с id container затем:

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

Ответ 5

В ответе заголовок вопроса (найденный поиском Google), а не фактический вопрос. Чтобы остановить разрыв строки, когда у вас есть разные теги заголовка, например

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

Даст вам Что, черт возьми, происходит?

и не

Что, черт возьми, происходит?

Ответ 6

<h1 style="text-align: left; float: left;">Text 1</h1>
<h2 style="text-align: right; float: right; display: inline;">Text 2</h2>
<hr style="clear: both;" />

Надеюсь, это поможет!