как иметь два заголовка в одной строке в HTML

Я хочу иметь два заголовка h2 и h3 на одном горизонтальном правиле один слева, а другой справа. У них есть HR под ними, и я хочу, чтобы они были на том же расстоянии от этого HR.

Я попытался сделать их обоих встроенными и иметь один поплавок справа, а другой слева. Проблема с этим была с h3, поскольку она меньше H2 по вертикали, она была центрирована на половине длины h2.

h2 было похоже на сидение на hr, а h3 выглядело как парит в воздухе.

Я вроде как хотел, чтобы они оба сидели на hr.

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

Я говорил о визуальном описании ситуации.

11
css html html-heading

5 ответов

вам нужно обернуть два заголовка в div тег, и этот тег div использует стиль, который делает clear: both. е.г:

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

имеющего hr после на div тег гарантирует, что он будет помещен под оба заголовка.

или что-то очень похожее. Надеюсь, это поможет.

19

вам нужно только сделать один из:

  • сделать их как inline (или inline-block)
  • установить их в float влево или вправо

вы должны иметь возможность настроить height, padding или margin свойства меньшего заголовка для компенсации его позиционирования. Я рекомендую установить оба заголовка, чтобы иметь то же самое height.

посмотреть этот live jsFiddle для примера.

(код jsFiddle):

в CSS

h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h2, h3 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}​

HTML-код

<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />​
4

свойство CSS vertical-align должно помочь вам здесь:

vertical-align: bottom;

это то, что вам нужно для вашего меньшего заголовка :)

Вертикальный-Выровняйте

3

проверьте мой образец решения

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

это разделит вашу страницу на две и вставит два элемента заголовка в правую и левую части поровну.

2

следующий код позволит вам иметь два заголовка в одной строке, первый выровненный слева и второй выровненный справа, и имеет дополнительное преимущество в сохранении обоих заголовков на одной базовой линии.

часть HTML:

<h1 class="text-left-right">
    <span class="left-text">Heading Goes Here</span>
    <span class="byline">Byline here</span>
</h1>

и CSS:

.text-left-right {
    text-align: right;
    position: relative;
}
.left-text {
    left: 0;
    position: absolute;
}
.byline {
    font-size: 16px;
    color: rgba(140, 140, 140, 1);
}
0