11
votes

Comment puis-je placer deux titres à côté de l'autre en utilisant CSS?

<h5>Category</h5><h6>auto</h6>
places Category and auto on separate lines, like this:CategoryautoHow can I place them both on the same line, like this?Category auto

0 commentaires

3 Réponses :


7
votes
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>

4 commentaires

Inline-Block n'est pas pris en charge dans tous les navigateurs.


Cela est possible, cependant, en utilisant des styles en ligne n'est pas une façon recommandée de travailler. Votre solution n'est pas fausse, mais je pense qu'il est préférable de montrer une façon beaucoup plus agréable de travailler en utilisant des feuilles de style ou une définition de style sur le dessus du document.


Pour IE, "Inline-Block" est limité à


@ertjan: Je suis d'accord. Ce n'était qu'une version minimaliste de communiquer l'idée.



28
votes

h (n) éléments sont des éléments «block», ce qui signifie qu'ils deviendront à prendre tous les espaces horizontaux disponibles. Cela signifie également qu'ils vont pousser n'importe quoi "à droite" d'eux jusqu'à la ligne suivante.

Un moyen facile d'accomplir est de définir leur affichage sur Inline: P>

<style>
    h5, h6 {display:inline;}
</style>


2 commentaires

Pouvez-vous dire quels navigateurs ne prennent pas en charge le mode d'affichage en ligne?


@Gertjan, c'est-à-dire que ne le supporte que pour des éléments qui sont nativement en ligne; FF2 ne le supporte pas du tout.



3
votes

Vous devez modifier le mode d'affichage des éléments. Les balises H sont rendues comme des éléments de bloc par défaut. Pour remplacer ce problème, ajoutez les définitions de style suivantes sur votre site Web ou CSS

h5,h6 { float: left; } 


0 commentaires