Powiedzmy, że mam pole tekstowe, które chcę wypełnić całą linię. Dałbym mu taki styl:
input.wide {display:block; width: 100%}
Powoduje to problemy, ponieważ szerokość zależy od zawartości pola tekstowego. Pola tekstowe mają domyślnie margines, obramowanie i wypełnienie, co powoduje, że pole tekstowe o szerokości 100% jest większe niż jego pojemnik.
Na przykład tutaj po prawej:
Czy istnieje sposób, aby pole tekstowe wypełniało szerokość kontenera bez rozszerzania się poza niego?
Oto przykładowy kod HTML pokazujący, co mam na myśli:
<!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>
Jeśli zostanie to uruchomione, możesz zobaczyć, patrząc na „normalne” pole tekstowe, że „szerokie” pole tekstowe wystaje poza pojemnik. „Normalne” pole tekstowe unosi się do faktycznej krawędzi kontenera. Próbuję sprawić, by „szerokie” pole tekstowe wypełniało swój kontener, nie wykraczając poza krawędź, tak jak „normalne” pole tekstowe.