Выровнять заголовок H1 и обычный текст в одной строке

Ответ 1

Смотрите этот CodePen.

Идея состоит в том, чтобы сделать <h1> inline, чтобы второй текст находился в одной строке.

HTML:

<header>
  <h1>Text</h1>
  <span>text2</span>
</header>

CSS

header { border-bottom: 1px solid #000; }
header > h1 { display: inline-block; }
header span { margin-left: 100px; }

Ответ 2

Я придумал простое решение. Мои требования несколько отличаются тем, что я хочу, чтобы мой статус был выровнен.

HTML

<div class="my-header">
    <h2>Title</h2>
    <span>Status</span>
</div>
<div style="clear:both"></div>

CSS

.my-header h2 { 
  display: inline;
}
.my-header span { 
  float: right;
}

Пример

Проверьте plunk.

Ответ 3

Добавьте эту строку border-bottom:1px solid #000

<div style="border-bottom:1px solid #000;"> 
<div align="left"><h1>Header</h1></div>
<div align="right">Regular Text Goes Here</div>
</div>

DEMO

Используйте имя класса вместо встроенного стиля.

Ответ 4

Попробуйте

<div style="float:left;"><h1>Header</h1></div>
<div style="float:right;">Regular Text Goes Here</div>

вместо

Ответ 5

Я думаю, вы должны написать вот так: -

HTML

<div style="border-bottom:1px solid black; overflow:hidden;"> 
<h1>Header</h1>
<div class="right">Regular Text Goes Here</div>
</div>

CSS

h1 {
float:left;
  margin:0px;
  padding:0;
}
.right {
float:right;
  margin:0px;
  padding:0px;
}

DEMO

ДАЖЕ ВЫ МОЖЕТЕ ИСПОЛЬЗОВАТЬ ДАННЫЙ МЕТОД ТАКЖЕ С МИНИМИРОВАННЫМ МАРКУПОМ: - DEMO

Ответ 6

Есть два метода для выполнения H1 и TEXT inline. Чтобы уточнить, TXT находится в элементе контейнера. Вы предлагаете DIV, но подойдет любой символический элемент. Ниже, h1 и p иллюстрируют обычное использование, показывая, что вам не нужно прятаться от блокировки элементов, используя DIV (хотя div для многих кодировщиков javascript являются пандемическими).

Способ 1

.inline { display: inline; float: left; padding-right: 2rem; }
<h5 class="inline">Element a link family...</h5>
<p class="inline">

Способ 2

h5 { display: inline-block; float: left; font-size: 1rem; line-height: 1rem; margin-right: 2rem; }
h5>p { display: inline-block; float: right; }
<h5>Title</h5>
<p>Paragraph</p>

Ответ 7

<div>
<span style="font:bold 16px verdana;">Header</span><span"style="font:bold 10px verdana;">other line</span>

</div>

Это поможет вам добиться желаемого эффекта. Просто используйте правильный CSS.