Ekranlı giriş: blok bir blok değil, neden olmasın?

153

display:block;width:auto;Metin girişimde neden div gibi davranmıyor ve kap genişliğini doldurmuyor?

Bir div'in otomatik genişliğe sahip bir blok öğesi olduğu izlenimi altındaydım. Aşağıdaki kodda div ve giriş aynı boyutlara sahip olmamalıdır?

Girişin genişliği doldurmasını nasıl sağlayabilirim? Girişte dolgu ve kenarlık olduğu için% 100 genişlik çalışmaz (1 piksel + 5 piksel +% 100 + 5 piksel + 1 piksel nihai genişliğe neden olur). Sabit genişlikler bir seçenek değil ve daha esnek bir şey arıyorum.

Geçici bir soruna doğrudan yanıt vermeyi tercih ederim. Bu bir CSS tuhaflığı gibi görünüyor ve daha sonra yararlı olabileceğini anlamak.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, input {
            border: 1px solid red;
            height: 5px;
            padding: 5px;
        }
        input, form {
            display: block;
            width: auto;
        }
        </style>
    </head>

    <body>
        <div></div>
        <form>
            <input type="text" name="foo" />
        </form>
    </body>
</html>

Şunu da belirtmeliyim ki bunu zaten paketleyici çözümleriyle yapabilirim. Bu sayfa semantiği ve CSS seçici ilişkileri ile vidalama dışında sorunun doğasını ve INPUT kendi doğasını değiştirerek üstesinden gelip gelemeyeceğini anlamaya çalışıyorum.

Tamam, bu gerçekten garip! Çözümün sadece max-width:100%bir girdiye eklemek olduğunu gördüm width:100%;padding:5px;. Ancak bu daha fazla soru ortaya çıkarır (ki bu ayrı bir soruda soracağım), ancak genişliğin normal CSS kutusu modelini, max-width ise Internet Explorer sınır kutusu modelini kullanıyor gibi görünüyor. Ne tuhaf.

Tamam, bu sonuncusu Firefox 3'te bir hata gibi görünüyor. Internet Explorer 8 ve Safari 4, maksimum genişliği% 100 + dolgu + sınır ile sınırlandırıyor; Son olarak, Internet Explorer doğru bir şey buldu.

Aman tanrım, bu harika! Bununla oynama sürecinde ve saygın gurus Dean Edwards ve Erik Arvidsson'dan çok yardım alarak, rastgele dolgu ve kenarlıklara sahip öğeler üzerinde% 100 genişlikte gerçek bir çapraz tarayıcı yapmak için üç ayrı çözümü bir araya getirmeyi başardım. Aşağıdaki cevaba bakınız. Bu çözüm fazladan HTML işaretlemesi gerektirmez, sadece bir sınıf (veya seçici) ve eski Internet Explorer için isteğe bağlı bir davranış gerektirir.

html css

— Spliff
kaynak

Tam bir yinelenen http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers

— Christophe EBLE

7

@SleepyCod bu tam bir kopya değil. Bu soru, inputgörünüşte CSS 2.1 spesifikasyonuna uymayan elemanların problemini ele alırken, bağlandığınız soru, CSS 2.1 spesifikasyonunun sınırları dahilinde mükemmel bir şekilde meydana gelen taşma kutularının nasıl önleneceğini soruyor. Hem sorular hem de çözümleri örtüşüyor, ancak onlara tam kopyalar demek yanlış.

— amn

130

Ne bulduğumu kontrol edin box-sizing:border-box, CSS 3'ten nispeten bilinmeyen stili kullanarak bir çözüm . Bu, öğelerin dolgusu ve / veya kenarlıkları ne olursa olsun, herhangi bir öğede 'gerçek'% 100 genişliğe izin verir.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

Bu çözüm, Erik Arvidsson tarafından yüzde ve diğer piksel olmayan genişlikleri desteklemek için Dean Edwards'dan bazı değişiklikler ile yazılmış bir davranış yoluyla Internet Explorer 6 ve Internet Explorer 7'yi desteklemektedir.

Çalışma örneği
Davranış (boxsizing.htc)

— Spliff
kaynak

Bu inanılmaz bir çözüm gibi görünüyor, ancak IE8'de çalışmıyor (div & field kutuları yeterince geniş değil). Bu yöntemde herhangi bir güncelleme olup olmadığını biliyor musunuz? Teşekkürler!

— rocketmonkey

2

: Schepp tarafından bu polyfill üzerinde github de IE8 ile daha sınır durumları ve iş işlemek için IE6 / 7 polyfill günceller github.com/Schepp/box-sizing-polyfill

— nicjohnson

Teşekkürler! Her ikisini de 300 piksel genişliğe ayarladığımda <giriş türü = metin> ve <giriş türü = gönder> öğelerinin farklı genişlikler olduğunu anlayamadım. Bu çözüldü! İki yıl sonra Firefox'un en son sürümü için hala -moz- önekini kullanmanız gerektiğini unutmayın . caniuse.com/#feat=css3-boxsizing

— Darren Cook

4

Ne yazık ki, kenar boşlukları eklemeniz gerekiyorsa bu yaklaşım sarmalayıcı divini ortadan kaldırmak için kullanılamaz (çünkü genişlik kullanırsanız kenar boşlukları herhangi bir öğe üzerinde doğru çalışmaz:% 100)

— SystemParadox

6

Bu sorunu çözmez. Evet kullanırsanız çalıştığını width:100%ancak kullanırsanız öyle değil width:auto, buraya bakın: jsfiddle.net/hGuzE

— Nemrut'tan

8

Bunun olmasının nedeni, metin girişinin boyutunun boyut özelliğine göre belirlenmesidir. <input> etiketinin içine size = "50" ekleyin. Sonra size = "100" olarak değiştirin - ne demek istediğimi anlıyor musunuz?

Daha iyi bir çözüm olduğundan şüpheleniyorum, ancak akla gelen tek şey SO'daki "HTML'nin gizli özellikleri" sorusunda bulduğum bir şey: Bir girdi yerine içerik düzenlenebilir bir div kullanın. Kullanıcı girişini ekteki forma geçirmek (eğer ihtiyacınız olan buysa) biraz zor olabilir.

HTML'nin gizli özellikleri

— MatrixFrog
kaynak

8

CSS çalışanlarının bunu nasıl haklı çıkardığını merak ediyorum. Genişlik, piksel / yüzde ile boyutu açıkça geçersiz kılabilirse, öğe bir blok olduğunda neden onurlandırılmaya devam edeceğini anlamıyorum.

— SpliFF

1

Ancak aynısı böyle olur, buttonhangisinin bir sizeözelliği yoktur?

— zanona

1

Bunun cevabı "neden böyle standarttır" kısmına daha fazla odaklanan bir soru: stackoverflow.com/questions/4567988/… Bunun en önemli iddiası input, değiştirilmiş bir unsur olması.

— Ciro Santilli 法轮功 at 病六四事件法轮功

7

En iyi seçeneğiniz, girdiyi kenarlığınız, kenar boşluklarınız vb.Ile bir div'a sarmak ve girdiyi% 100 genişlikte ve kenarlıksız, kenar boşluğu vb.

Örneğin,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
            div {
                border: 1px solid red;
                padding: 5px;
            }
            input, form {
                display: block;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <form>
            <div><input type="text" name="foo" /></div>
        </form>
    </body>
</html>

— Jonathan Fingland
kaynak

1

Evet, işe yarayacak ama bu bir cevaptan daha çok bir çözüm. neden giriş blok davranışı görmezden gibi görünüyor belirlemeye çalışıyorum.

— SpliFF

2

Jonathan, lütfen burada görünen kabalık durumumu affet, ama buraya doğru (tm) cevabı aramaya geldim ve ayrıca @SpliFF'in özellikle bir geçici çözüme doğrudan cevap vermesini tercih ettiği bölümü memnuniyetle okudum, ama yine de bir yedek daha ekliyorsun (olduğu gibi, hem SO'da hem de internette başka yerlerde birçok kez tekrarlanır) cevap, görünüşte sorunun sözleşmesini görmezden geliyor. Sana sorabilir miyim - neden? Şimdiden teşekkür ederim. -Şimdi senin.

— amn

1

Sahte, şöyle olabilir:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>

— Jacob
kaynak

1

Geçmişte sahte bir yaklaşım yaptım ama dürüst olmak gerekirse hastalanıyorum. Girdi almak için% 99 genişlik kullanmak gibi her türlü geciktirilmiş kesmek ile sonuçlanır ve maç seçer. Gerçekten bir div gibi bir girdi tedavi etmek için bir yol istiyorum ve ben sadece bir şey göz ardı umuyordum.

— SpliFF

2

ayrıca girişiniz inputWrapper'ı taşacaktır çünkü hala genişliğe sahiptir: dahili dolgu ile% 100.

— SpliFF

1

Bunu dene:

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }

— mikrofon
kaynak

1

giriş dolgusunu ve kenarlığını dışarıda bıraktınız. Ne yaptığını anlayana kadar yanıldığını söylemek üzereydim. Şimdi merkuro'nun yapmaya çalıştığı şeyi elde ediyorum (kodu hala yanlış, ama kavram neredeyse oradaydı). Sağa dolgu% 100 anlamını 12 piksel (kenarlık artı giriş dolgu) anlamını değiştirir. Bu yaklaşımın dezavantajı, formdaki diğer tüm çocukların da dolgudan etkilenmesi ve telafi etmesi gerektiğidir.

— SpliFF

1

Ayrıca, bunun gibi sahte olabilir:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>width:auto</title>

        <style>

            .container {
                width:90%;
            }

            .container div{
                border: 1px solid red;
                padding: 5px;
                font-size:12px;
                width:100%;
            }

            input{
                  width:100%;
                border: 1px solid red;
                font-size:12px;
                padding: 5px;
            }

            form {

                margin:0px;
                padding:0px;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div>
                asdasd
            </div>
            <form action="">
                <input type="text" name="foo" />
            </form>
        </div>
    </body>
</html>

— AlexC
kaynak

1

Yukarıdaki ile aynı probablem,% 100 genişlikte bir iç dolgu var. Bu taşacak.

— SpliFF

bunu javascript ile yapabilirsiniz

— AlexC

1

Bunu tarzınıza ekleyin:

box-sizing: border-box;

— John Porter
kaynak