Disons que j'ai une zone de texte que je veux remplir une ligne entière. Je lui donnerais un style comme celui-ci:
input.wide {display:block; width: 100%}Cela pose des problèmes car la largeur est basée sur le contenu de la zone de texte. Les zones de texte ont une marge, des bordures et un remplissage par défaut, ce qui rend une zone de texte de 100% de largeur plus grande que son conteneur.
Par exemple, ici à droite:
Existe-t-il un moyen de faire en sorte qu'une zone de texte remplisse la largeur de son conteneur sans s'étendre au-delà?
Voici un exemple de HTML pour montrer ce que je veux dire:
<!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>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>Si cela est exécuté, vous pouvez voir en regardant la zone de texte "normale" que la zone de texte "large" dépasse du conteneur. La zone de texte "normale" flotte jusqu'au bord réel du conteneur. J'essaie de faire en sorte que la zone de texte "large" remplisse son conteneur, sans s'étendre au-delà du bord comme la zone de texte "normale" l'est.