Maison >interface Web >tutoriel CSS >réglage de la largeur de travée

réglage de la largeur de travée

不言original: 2018-06-12 11:43:301986parcourir

Comment définir la largeur du span en HTML ? Cela semble être un problème très simple. Il semble que vous puissiez simplement utiliser l'attribut width avec style.

Le paramètre de largeur de span n'est pas valide par défaut
Comment définir la largeur de span en HTML ? Cela semble être un problème très simple. Il semble que vous puissiez simplement utiliser l'attribut width avec style. Par exemple,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

s'est avéré invalide après des tests, que ce soit dans Firefox ou IE.

En consultant la définition de width dans la norme CSS2, nous avons constaté que l'attribut width en CSS n'est pas toujours valide. Si l'objet est un objet en ligne, l'attribut width sera ignoré. Firefox et IE l'ont fait à l'origine conformément aux normes.
Modifier span en type de bloc et définir float n'est pas une solution parfaite
Ajoutez l'attribut display dans le CSS de span et définissez span sur type de bloc Element. De cette façon, la largeur est effectivement efficace, mais elle est efficace. change également. Le texte précédent et suivant sont séparés en lignes différentes. De cette façon, span devient réellement p complètement.

span { background-color:#ffcc00; display:block; width:150px; }

Beaucoup de gens suggéreront d'ajouter un autre attribut CSS float, qui peut effectivement résoudre le problème sous certaines conditions. Par exemple, dans notre exemple, s'il n'y a pas de texte devant span, c'est effectivement faisable. Mais si tel est le cas, le texte avant et après sera connecté ensemble et le span s'étendra jusqu'à la deuxième ligne.

span { 
background-color:#ffcc00; 
display:block; 
float:left; 
width:150px; 
}

Boîtier du bouton
En fait, parmi les différents éléments en HTML, il existe effectivement des situations où il est à la fois en ligne et la largeur peut être définie. Par exemple, le code suivant affiche l'objet bouton, qui peut apparaître au milieu du texte et définir la largeur.

<body> 
fixed <button style="width:150px;">width</button> button 
</body>

La durée peut-elle être affichée comme un bouton ? Grâce à la définition de l'affichage et à l'explication des objets en ligne dans la norme CSS2, nous avons constaté que les créateurs de la norme CSS2 ont établi des réglementations soit-ou, indiquant si tous les éléments appartiennent à la ligne, soit en ligne, soit en bloc, et cela n'existe pas. en tant que bouton en ligne, vous pouvez définir la valeur de l'attribut width comme block.

Standard CSS 2.1 mis à jour

En regardant la norme mise à jour, une valeur d'attribut appelée inline-block a été ajoutée à la définition de l'affichage dans le projet de norme CSS2.1, qui est juste pour nous confronté à cette situation. Jetez ensuite un œil aux situations correspondantes des différents navigateurs.

Firefox

J'ai appris grâce à la documentation d'affichage que le bloc en ligne sera implémenté dans Firefox 3 à l'avenir. Grâce à la référence des attributs étendus de Mozllia, nous avons appris que dans les versions antérieures à Firefox 3, comme l'actuel Firefox 2, vous pouvez utiliser -moz-inline-box pour obtenir le même effet.

IE

J'ai appris de la documentation d'affichage dans MSDN que le bloc en ligne a été implémenté. Le test réel a révélé qu'il n'y avait aucun problème après IE 6.0.

Solution parfaite

La définition CSS du code suivant résout parfaitement le problème de réglage de la largeur de span. Étant donné que les navigateurs ignorent généralement les propriétés CSS non prises en charge, il est préférable d'écrire la ligne display:inline -block à la fin, afin que dans Firefox, si le futur Firefox 3 est atteint, cette ligne fonctionnera. Le code peut être compatible avec différentes versions. en même temps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
display:-moz-inline-box; 
display:inline-block; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS pour effacer les flottants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment effacer les flotteurs en utilisant CSSArticle suivant：Comment effacer les flotteurs en utilisant CSS

Articles Liés

Voir plus