Допустим, у меня есть текстовое поле, которое я хочу заполнить целую строку. Я бы придал ему такой стиль:
input.wide {display:block; width: 100%}
Это вызывает проблемы, потому что ширина зависит от содержимого текстового поля. Текстовые поля по умолчанию имеют поля, границы и отступы, что делает текстовое поле шириной 100% больше, чем его контейнер.
Например, здесь справа:
Есть ли способ заставить текстовое поле заполнить ширину своего контейнера, не выходя за его пределы?
Вот пример HTML, чтобы показать, что я имею в виду:
<!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>
Если это запустить, вы можете увидеть, посмотрев на «нормальное» текстовое поле, что «широкое» текстовое поле выступает за пределы контейнера. «Нормальное» текстовое поле перемещается к фактическому краю контейнера. Я пытаюсь заставить "широкое" текстовое поле заполнить свой контейнер, не расширяясь за край, как "нормальное" текстовое поле.