CSS - aligner le texte sur la div

Question

J'ai du mal à aligner le texte sur la div.

J'ai actuellement ceci :

Mais c'est ce que je veux faire (je viens d'éditer une capture d'écran pour vous montrer ce que je veux dire) :

Mon code se présente comme suit :

HTML

<div class="regionHeader">
    <div class="regionArrow"></div>
    <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

CSS

.regionHeader {
    border-bottom: 1px solid #ffd800;
    cursor: pointer;
}

.regionArrow {
    border-right: 4px solid #ffd800;
    border-bottom: 4px solid #ffd800;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    float: left;
    margin-top: 11px;
    margin-right: 13px;
    margin-bottom: 0px;
    margin-left: 3px;
}

h2 {
    font-family: changa-regular;
    font-size: 2em;
}

J'ai déjà joué avec l'affichage et les flottants, mais soit cela ne fonctionne pas, soit je m'y prends mal.

Answer 1

Vous pouvez soit utiliser simplement un padding-left sur votre rubrique :

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 12px;
  height: 13px;
  transform: rotate(45deg);
  float: left;
  margin-top: 11px 13px 0 3px;
}

h2 {
  font-size: 2em;
  padding-left: 1.2em; /* <- added */
}

<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

Vous pouvez également utiliser une approche flexbox et supprimer le float .

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
  display: flex; /* <- added */
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 16px;
  height: 13px;
  transform: rotate(45deg);
  margin: 30px 15px;
}

h2 {
  font-family: changa-regular;
  font-size: 2em;
}

<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

Prise en charge des navigateurs pour flexbox est assez bon. N'oubliez pas d'ajouter les préfixes des fournisseurs.