делая его бесполезным.

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

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

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

 javiertoledos19 янв. 2011 г., 15:03
сделать это с помощью CSS h1 {float left; } hr {clear: left; }

Ответы на вопрос(5)

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

display:inline;

достаточно.

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

clear:none;
 BoltClock♦17 нояб. 2013 г., 07:34
Встроенные элементы не могут очистить поплавки, так что если у вас естьclear: none или даже что-то, что неnone на встроенный элемент не имеет значения.

h1 а такжеh2 родныеdisplay: block элементы.

Сделать ихdisplay: inline поэтому они ведут себя как обычный текст.

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

 Bruno Machado - vargero19 янв. 2011 г., 15:03
Если я просто установите егоh1, это не имеет никакого значения, и если я сделаю это для обоих, я потеряю выравнивание.
 Renan20 нояб. 2013 г., 20:58
На самом деле это решение решает проблему лучше, чем решение, помеченное как ответ.
 Pekka 웃19 янв. 2011 г., 15:04
@ Бруно Извини, я неправильно понял твое требование.float починю, смотрите ответ @ Floern.
 Ionică Bizău16 янв. 2013 г., 19:07
@Pekka 웃, +1 Для простого решения. Вы сэкономили мое время.
 bitcoder20 июл. 2016 г., 21:21
В качестве примера для других нубов, как я (может, кто-то меня поправит),<h1 style="display: inline">Title</h1> <h2 style="display: inline">Context</h2>

Положитьh1 а такжеh2 в контейнере с идентификаторомcontainer тогда:

#container {
    display: flex;
    justify-content: space-beteen;
}
Решение Вопроса

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

<h1 style="text-align:left;float:left;">Title</h1> 
<h2 style="text-align:right;float:right;">Context</h2> 
<hr style="clear:both;"/>
 DisgruntledGoat30 нояб. 2012 г., 12:24
@ Пекка это не нужноdisplay:inline вообще. На самом деле это бесполезно, потому что плавающие элементы всегдаdisplay:block, Кроме того (@Floern), если вы не задаете ширину заголовков, выравнивание текста также не имеет смысла.
 Shortly FD29 июл. 2018 г., 10:10
добавьте поля слева: 10 пикселей к h1 и поля справа: 10 пикселей к h2 элементам
 Ben01 мая 2018 г., 17:57
Блин идеальный друг
 Pekka 웃30 нояб. 2012 г., 14:28
@ Разочарован ты прав!
<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;" />

 BoltClock♦17 нояб. 2013 г., 07:34
float: right будет сводить на нет последствияdisplay: inlineделая его бесполезным.

Ваш ответ на вопрос