Digamos que tengo un cuadro de texto que quiero llenar una línea completa. Le daría un estilo como este:
input.wide {display:block; width: 100%}Esto causa problemas porque el ancho se basa en el contenido del cuadro de texto. Los cuadros de texto tienen margen, bordes y relleno de forma predeterminada, lo que hace que un cuadro de texto con un ancho del 100% sea más grande que su contenedor.
Por ejemplo, aquí a la derecha:
¿Hay alguna forma de hacer que un cuadro de texto llene el ancho de su contenedor sin expandirse más allá?
Aquí hay un ejemplo de HTML para mostrar lo que quiero decir:
<!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 se ejecuta esto, puede ver mirando el cuadro de texto "normal" que el cuadro de texto "ancho" sobresale más allá del contenedor. El cuadro de texto "normal" flota hasta el borde real del contenedor. Estoy tratando de hacer que el cuadro de texto "ancho" llene su contenedor, sin expandirse más allá del borde como lo es el cuadro de texto "normal".