Définition de la largeur des éléments en ligne
Vous pouvez définir la largeur des éléments en ligne tels que
<span>,<em>et<strong>, mais vous ne remarquerez aucun effet avant de les avoir positionnés.
a) Je pensais que la largeur d’un élément en ligne ne pouvait pas être définie?
b) En supposant que la largeur puisse être définie - nous ne remarquerons aucun effet (donc la largeur que nous spécifions) avant de positionner l’élément inline Positionner comment/où?
c) Pourquoi la largeur des éléments en ligne n'apparaît-elle que lorsque nous les "positionnons"?
Comme d'autres l'ont mentionné, si vous définissez la largeur (ou une autre propriété liée à la position) d'un élément en ligne, le navigateur affichera ensuite l'élément en tant qu'élément de bloc.
Vous pouvez déclarer explicitement ce type de comportement en utilisant la propriété CSS display. Les paramètres les plus courants sont display: inline (par défaut), display: block et display: none.
Une référence complète pour la propriété display est disponible ici .
Toutefois, il convient de noter que la spécification HTML 4.01 décourage l'utilisation de "substitution de l'interprétation conventionnelle d'éléments HTML":
Les feuilles de style fournissent les moyens pour spécifier le rendu de l'arbitraire éléments, y compris s'il s'agit d'un élément est rendu sous forme de bloc ou en ligne. Dans certains cas, comme un style en ligne pour les éléments de liste, cela peut être approprié, mais d’une manière générale, les auteurs sont découragés de annulant le conventionnel interprétation des éléments HTML dans par ici.
Il y a aussi l'option de affichage: bloc en ligne, ce qui pourrait vous donner le meilleur des deux mondes.
a) La largeur d'un élément en ligne est ignorée
b, c) Lorsque vous "positionnez" un élément en ligne (je suppose que cela signifie que vous utilisez position: absolute ), vous en faites un élément de bloc dont la largeur est interprétée par le navigateur.
Cela signifie que si vous appliquez position: absolute à un élément en ligne, il deviendra un élément de bloc et gagnera en largeur.
Je pense que cela est dû au fait que lorsque vous spécifiez des attributs de position pour un élément "inline", l'élément n'est plus affiché inline et est plutôt traité comme un élément de niveau bloc.
une. La largeur des éléments en ligne est ignorée.
b. En fait, vous pouvez appliquer la largeur à l'élément si vous avez défini display: inline-block;, mais vous devez également appliquer overflow: hidden; pour afficher les résultats.
Pour profiter de tous les avantages des types en ligne et en bloc, vous pouvez utiliser les extraits suivants:
display: inline-block;width: 50%; // or px, em, etc.overflow: hidden;text-overflow: Ellipsis;
Dans ce cas, vous pouvez gérer la largeur et avoir une fonction Ellipsis de texte.
L'élément en ligne ne peut pas avoir de largeur. La largeur est une propriété de l'élément de bloc. Donc, pour utiliser la propriété width sur un élément en ligne ou un élément dont le type d'affichage est inline, définissez display comme inline-block, par exemple: display: inline-block;