Disons que j'ai une zone de texte que je veux remplir sur 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 fait qu'une zone de texte de 100 % de largeur est 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 cette opération est exécutée, 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 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 le fait la zone de texte "normale".
