Предположим, у меня есть текстовое поле, которое я хочу заполнить целую строку. Я бы назвал стиль таким:
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>
Если это выполняется, вы можете увидеть, посмотрев "нормальное" текстовое поле, в котором "обширное" текстовое поле торчит вне контейнера. "Нормальное" текстовое поле плавает до фактического края контейнера. Я пытаюсь сделать "широкое" текстовое поле заполнить его контейнер, не расширяясь за пределы, как "нормальное" текстовое поле.
