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