Hãy nói rằng tôi có một hộp văn bản mà tôi muốn điền vào một dòng. Tôi sẽ cho nó một phong cách như thế này:
input.wide {display:block; width: 100%}Điều này gây ra vấn đề vì chiều rộng dựa trên nội dung của hộp văn bản. Các hộp văn bản có lề, viền và đệm theo mặc định, làm cho hộp văn bản có chiều rộng 100% lớn hơn thùng chứa của nó.
Ví dụ, ở đây bên phải:
Có cách nào để làm cho một hộp văn bản lấp đầy chiều rộng của thùng chứa của nó mà không mở rộng ra ngoài nó không?
Dưới đây là một số ví dụ HTML để hiển thị ý tôi là:
<!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>Nếu điều này được chạy, bạn có thể thấy bằng cách nhìn vào hộp văn bản "bình thường" mà hộp văn bản "rộng" đang nhô ra ngoài thùng chứa. Hộp văn bản "bình thường" nổi lên cạnh thực tế của container. Tôi đang cố gắng làm cho hộp văn bản "rộng" lấp đầy thùng chứa của nó, mà không mở rộng ra ngoài cạnh như hộp văn bản "bình thường".