Onların kapları ötesine %100 Genişlikte Metin Kutuları durdurabilirim?

SORU

10 Mart 2009, Salı

Onların kapları ötesine %100 Genişlikte Metin Kutuları durdurabilirim?

Bütün bir satır doldurmak istiyorum bir metin kutusu var diyelim. Bu şekilde bir stil vermek istiyorum:

input.wide {display:block; width: 100%}

Bu genişlikte metin kutusunun içeriğine bağlı olduğu için sorunlara neden olur. Metin kutuları, sınırları, ve 100% genişlikte bir metin kutusu kabını daha büyük yapar, varsayılan olarak doldurma boşluğu var.

Burada sağda örneğin,:

enter image description here

Bir metin kutusu ötesine genişleyen olmadan kabını genişliği dolgu yapmak için herhangi bir yolu var mı?

İşte birkaç örnek, ne demek istediğimi göstermek için 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>

Eğer bu çalışma, bakarak görebilirsiniz "normal" metin kutusu "geniş" metin kutusu konteyner ötesine çıkmış. "Normal" metin kutusu kabın gerçek kenarına yerleşir. Bu şekilde yapmaya çalışıyorum "geniş" metin kutusu kabı doldurmak, kenar ötesinde gibi genişleyen olmadan "normal" metin kutusu.

CEVAP

10 Mart 2009, Salı

Bir metin kutusu ötesine genişleyen olmadan kabını genişliği dolgu yapmak için herhangi bir yolu var mı?

Evet: CSS3 özelliği ‘box-sizing: border-box’, ‘genişlik’ anlamına gelir harici bir dolgu eklemek ve sınır. ne yeniden tanımlayabilirsiniz kullanarak

Ne yazık ki CSS3, destek, çünkü çok olgun değil, ve spec süreci henüz bitmedi, bu arada tarayıcılarda farklı geçici isimler alır. Yani:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Eski okul alternatif sadece ‘doldurma-doğru’ kapsayan <div>üzerine bir miktar koymaktır veya <td>eleman ‘px’ tarayıcılar giriş verir mi. ne kadar sol ve sağ doldurma/sınır extra hakkında eşit (Genelde IE için 6px<8.)

Bunu Paylaş: