web-dev-qa-db-fra.com

comment avoir deux en-têtes sur la même ligne en html

Je veux avoir deux rubriques h2 et h3 sur la même règle horizontale, l'une à gauche et l'autre à droite. Ils ont un HR sous eux et je veux qu'ils soient à la même distance de ce HR. 

J'ai essayé de les rendre tous les deux alignés et d'avoir un flotteur à droite et l'autre à gauche. Le problème était que h3 était plus petit que h2 verticalement, il était centré à la moitié de la longueur de h2.

h2 était un peu comme être assis à h et h3 avait l'air de flotter dans les airs.

Je voulais un peu qu'ils soient comme les deux assis à la place.

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

Je parlais de décrire visuellement la situation.

htmlcsshtml-heading
14
Aditya Sastry

Vous devez envelopper les deux en-têtes dans une balise div et faire en sorte que cette balise div utilise un style qui fait clear: both. par exemple:

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

Avoir la balise hr after div garantira qu'elle est poussée sous les deux en-têtes.

Ou quelque chose de très similaire à cela. J'espère que cela t'aides.

20
twilson

Vous ne devriez avoir besoin que de l'une des actions suivantes:

  • Faites-les tous les deux inline (ou inline-block)
  • Réglez-les sur float gauche ou droite

Vous devriez pouvoir ajuster les propriétés height, padding ou margin du titre le plus petit pour compenser son positionnement. Je recommande de définir les deux en-têtes pour qu'ils aient la même height.

Voir ceci live jsFiddle pour un exemple.

(code du 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 />​
6
Jon Newmuis

La propriété Css vertical-align devrait vous aider ici:

vertical-align: bottom;

est ce dont vous avez besoin pour votre en-tête plus petit :)

Alignement vertical

4
Wampie Driessen

Vérifier mon échantillon de solution

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

Cela divisera votre page en deux et insérera les deux éléments d'en-tête à droite et à gauche.

3
Tibs

Le code suivant vous permettra d’avoir deux en-têtes sur la même ligne, le premier aligné à gauche et le second aligné à droite, et présente l’avantage supplémentaire de conserver les deux en-têtes sur la même ligne de base.

La partie HTML:

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

Et le 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);
}
1
ianmightknow