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

139

Metin girdimdeki display:block;width:auto; neden bir div gibi davranmıyor ve kapsayıcı genişliğini doldurmuyor?Ekran ile giriş: blok bir blok değil, neden olmasın?

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

Genişliği doldurmak için girişi nasıl alabilirim? % 100 genişlik işe yaramaz, çünkü giriş dolgu ve bir kenarlığa sahiptir (1 piksel + 5 piksel +% 100 + 5 piksel + 1 piksel). Sabit genişlikler bir seçenek değildir ve daha esnek bir şey arıyorum.

Bir geçici çözüm için doğrudan bir yanıt kullanmayı tercih ederim. Bu bir CSS tuhafı gibi görünüyor ve daha sonra faydalı olabileceğini anlıyor.

<!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>

Bunu yazıcının geçici çözümleriyle yapabileceğimi belirtmeliyim. Sayfa semantiği ve CSS seçici ilişkileri ile bu vidalama dışında problemin doğasını anlamaya çalışıyorum ve INPUT'un kendisinin doğasını değiştirerek üstesinden gelinebilir.

Tamam, bu TRULY garip! Çözümün max-width:100%'u width:100%;padding:5px; numaralı bir girdiye eklemesi gerektiğini buldum. Ancak bu daha da fazla soru ortaya çıkarır (ayrı bir soruda soracağım), ancak genişlik normal CSS kutusu modelini kullanır ve max-width Internet Explorer kenar kutusu modelini kullanır. Ne kadar tuhaf. Tamam

, bu sonuncusu Firefox 3. Internet Explorer 8 ve Safari bir hata gibi görünen 4 sınır Spec yapmak ne diyor% 100 + dolgu + sınırına maksimum genişlik. Son olarak, Internet Explorer doğru bir şey var.

Aman tanrım, bu harika! Bu oyun ile ve gururlu gurular Dean Edwards ve Erik Arvidsson çok yardımı ile, keyfi dolgu ve sınırları olan öğeler üzerinde gerçek bir çapraz tarayıcı% 100 genişlik yapmak için üç ayrı çözümler parça parça başardı. Aşağıdaki cevaba bakınız. Bu çözüm, herhangi bir ek HTML işaretlemesi, sadece bir sınıf (veya seçici) ve eski Internet Explorer için isteğe bağlı bir davranış gerektirmez.

kaynak

2009-06-23 SpliFF

tam kopyası [http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers ] (http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers) tam kopyası değil –

@SleepyCod. Bu soru, CSS 2.1 spesifikasyonuna uymama gibi görünen 'input' elemanları problemini ele alırken, sorduğunuz soru, CSS 2.1 spesifikasyonunun sınırları dahilinde mükemmel şekilde meydana gelen taşma kutularının nasıl önleneceğini sorar. Hem soruların hem de çözümlerinin üst üste geldiği ancak tam olarak çoğaltıldığını söyleyen sorular ** yanlıştır. ** – amn

123

Ne olduğumu kontrol et ile beni, bu ne olursa olsun herhangi bir unsuru bir 'gerçek' % 100 genişlik verir CSS 3. nispeten bilinmeyen box-sizing:border-box stilini kullanarak bir çözüm elemanların dolgu ve/veya sınırlar söyledi.

<!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 çözelti yüzdesi ve diğer non-piksel genişlikleri destek Dean Edwards bazı kesme Erik Arvidsson tarafından yazılan bir davranış ile internette Explorer 6 ve Internet Explorer 7 destekler. arasında

Working example
Behaviour (boxsizing.htc)

kaynak

2009-06-23 16:36:13 SpliFF

+12

Yapabilirsem 1000 kez bu cevabı kabul ederdim. –

Siz, efendim, bir dahisin. – GeReV

Bu harika bir çözüm gibi görünüyor, ancak IE8'de çalışmıyor (div ve field box'lar yeterince geniş değil). Bu yöntemle ilgili herhangi bir güncelleme olup olmadığını biliyor musunuz? Teşekkürler! – rocketmonkeys

Yapabileceğiniz en iyi şey,

vb sınırında, kenar boşlukları ile bir div girişi sarın ve genişliği% 100 ile içinde girdi ve sınır yok, kenar boşlukları, vb Örneğin

sahip olmaktır böyle

<!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>

kaynak

2009-06-23 05:52:27

Evet, işe yarayacak ama bu bir cevaptan daha çok bir çözüm. Girişin neden blok davranışını görmezden geldiğini belirlemeye çalışıyorum. – SpliFF

Jonathan, burada bariz edepsizlik affet, ama doğru (tm) cevabını aramaya geldim ve aynı zamanda memnuniyetle @SpliFF özellikle o Geçici bir çözüm için "doğrudan cevabı tercih ediyorum bahseder bölümünü okumak, ama hala başka eklemek gereksiz görünüşte sorunun sözleşme göz ardı cevap (olduğu gibi, SO de ve başka yerlerde internet üzerinde hem birçok kez tekrarlanan) sana sorabilir miyim -.?.. ** neden ** şimdiden teşekkürler -Curiously senin – amn

nedeni yazı giriş büyüklüğü, boyutu özniteliği tarafından belirlenir olmasıdır. <girdisi> girişinin içine "50" boyutunu ekleyin. Sonra onu = "100" olarak değiştirin - ne demek istediğimi görüyor musunuz?

Daha iyi bir çözüm olduğundan şüpheleniyorum, ancak akla gelen tek şey, SO üzerinde "Gizli HTML özellikleri" sorusunda bulduğum bir şeydir: Giriş yerine içerik açısından düzenlenebilir bir div kullanın. Kullanıcı girişini kapama formuna geçirmek (ihtiyacınız olan buysa) biraz zor olabilir.

Hidden features of HTML

kaynak

2009-06-23 06:00:27 MatrixFrog

Ben meraklı m genişliği eleman bir blok olduğunda bunu yerine getirmeye devam etmelidir neden görmüyorum piksel/yüzdesi explictly boyutunu geçersiz Eğer CSS insanlar. Bu haklı bilmek. – SpliFF

aynı şekilde button' 'olur Ancak iyi ki bir 'size' özelliği olmayan – zanona

bu cevap gibi parçası "neden böyle standarttır" odaklanıyordur bir soru:? http://stackoverflow.com/questions/4567988/what-is-it -in-the-css-dom-o-pr Olaylar-bir-giriş-kutusu-ile-ekran-blok-ex-ex iddia Orada 'giriş' bir değiştirilen öğe olduğu için var. –

Sahte bunun böyle olabilir:

Ayrıca

<!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>

kaynak

2009-06-23 06:00:32 Jacob

Geçmişte sahte yaklaşımı yaptım ama dürüst olmak gerekirse ben bundan bıktım. Giriş almak için% 99 genişlik kullanmak gibi gecikmeli her tür hack ile sonuçlanır ve eşleşmeyi seçer. Gerçekten bir girişi bir div gibi tedavi etmenin bir yolunu istiyorum ve bir şeyleri gözden kaçırmamı umuyordum. – SpliFF

aynı zamanda girişiniz de genişliğe sahip olduğundan giriş genişliğini taşacaktır: iç dolgu ile% 100. Yukarıdaki gibi – SpliFF

sahte o bö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> 

      .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>

kaynak

2009-06-23 06:06:06 AlexC

aynı probablem,% 100 genişlikte bir iç dolgu var. Bu taşacak. – SpliFF

bunu javascript – AlexC

bu deneyin:

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

kaynak

2009-06-23 08:48:38 Mike

ile yapabilirsiniz, giriş dolgu ve kenarlık dışarı dışarı yaptı. Ne yaptığını anlayana kadar yanlış olduğunu söylemek üzereydim. Şimdi merkuro'nun ne yapmaya çalıştığını anladım (onun kodu hala yanlış, fakat konsept neredeyse oradaydı). Dolgu sağı,% 100'lük değeri 12px olarak değiştirir (kenarlık artı girdinin doldurulması).Bu yaklaşımın dezavantajı, formun diğer tüm çocuklarının da dolgudan etkilenmesi ve aynı zamanda telafi edilmesi gerektiğidir. – SpliFF

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

cevap

İlgili konular