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

Question

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

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

Спасибо, ребята!

Answer 1

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

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

Вы также должны сбросить значения по умолчанию padding и margin, которые имеют элементы.

Answer 2

Ключевое слово 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

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

display:inline;

.

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

clear:none;

Answer 4

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

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

Даст вам:

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

а не

Что за ... черт возьми, происходит? (стек не даст мне разбить строку, лол ... в любом случае, надеюсь, у вас есть идея.

Answer 5

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

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

Answer 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;" />

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