css h1 – seulement aussi large que le texte

J’ai un style H1 pour mon site:

.centercol h1 { color: #006bb6; font-weight: normal; font-size: 18px; padding:3px 3px 3px 6px; border-left:3px solid #c6c1b8; background:#f2efe9; display:block; } 

La couleur de fond couvre toute la largeur du centre, 500px …

Comment puis-je faire en sorte que ce H1 ne couvre que la largeur du texte du H1?

Vous pouvez utiliser la valeur inline-block pour l’affichage, mais dans ce cas vous perdrez la fonctionnalité de bloc de h1, c’est-à-dire que les frères seront affichés en ligne avec h1 s’ils sont des éléments en ligne (auquel cas vous pouvez utiliser un saut de ligne).
).

 display:inline-block; 

Utilisez display: table !
Il ne casse pas la réduction des marges comme l’ display: inline-block ou float: left .

Vous pouvez utiliser display:inline-block pour forcer ce comportement

Une solution simple à ce problème est de laisser votre élément H1 à gauche:

 .centercol h1{ background: #F2EFE9; border-left: 3px solid #C6C1B8; color: #006BB6; display: block; float: left; font-weight: normal; font-size: 18px; padding: 3px 3px 3px 6px; } 

J’ai mis en place un exemple simple de jsfiddle qui montre l’effet du style “float: left” sur la largeur de votre élément H1 pour quiconque recherche une réponse plus générique:

http://jsfiddle.net/zmEBt/1/

C’est parce que votre

est la largeur du centre de gravité. Spécifiez une largeur sur

et utilisez la margin: 0 auto; si vous le voulez centré

Ou, alternativement, vous pouvez faire flotter le

, ce qui le rendrait exactement aussi large que le texte.

Un peu comme les autres suggestions, vous pouvez utiliser le code suivant. Cependant, si vous passez la marge: 0 auto; route Je recommande que la marge pour le haut et le bas d’un H1 soit définie sur autre chose que 0. Donc, peut-être que marge: 6px auto; ou quelque chose.

 .centercol h1{ display: inline-block; color: #006bb6; font-weight: normal; font-size: 18px; padding:3px 3px 3px 6px; border-left:3px solid #c6c1b8; background:#f2efe9; display:block; } 

align-self-start, align-self-center … en flexbox

 .centercol h1{ background: #F2EFE9; border-left: 3px solid #C6C1B8; color: #006BB6; display: block; align-self: center; font-weight: normal; font-size: 18px; padding: 3px 3px 3px 6px; } 

Vous pouvez utiliser un au lieu d’un

.