Diyelim ki tüm satırı doldurmak istediğim bir metin kutusu var. Ben böyle bir stil verecekti:
input.wide {display:block; width: 100%}Genişlik metin kutusunun içeriğine dayandığından, bu sorunlara neden olur. Metin kutuları varsayılan olarak kenar boşluğu, kenarlıklar ve dolguya sahiptir, bu da% 100 genişlikli bir metin kutusunu kabından daha büyük yapar.
Örneğin, burada sağda:
Bir metin kutusunu konteynerinin genişliğini genişletmeden doldurmanın herhangi bir yolu var mı?
İşte ne demek istediğimi göstermek için bazı örnek 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>Bu çalıştırılırsa, "geniş" metin kutusunun kabın dışına taştığını "normal" metin kutusuna bakarak görebilirsiniz. "Normal" metin kutusu kabın gerçek kenarına doğru yüzer. Ben "normal" metin kutusu gibi kenar ötesine genişlemeden, "geniş" metin kutusunu kendi konteyner doldurmaya çalışıyorum.