genişliği:otomatik <input> alanlar

SORU

7 Ocak 2011, Cuma

genişliği:otomatik <input> alanlar

Acemi CSS soru. display:block bir elemanı width:auto sandım 'mevcut boşluğu doldurmak'. Ancak <input> bir eleman için bu durum görünmüyor. Örneğin:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

İki soru sonra:

Otomatik demek genişliği tam olarak bir tanımı var mı? CSS spec bana anlaşılmaz geliyor, ama belki ilgili bölümü kaçırdım.
Bir şekilde giriş alanı için beklenen davranışım - ıe ulaşmak için var. diğer blok düzeyi öğeler gibi kullanılabilir alanı kaplayacak?

Teşekkürler!

CEVAP

7 Ocak 2011, Cuma

<input>'nın genişlik size özniteliği oluşturulur. Varsayılan size otomatik genişlik sürükleyen şey.

Aşağıda benim örnekte gösterildiği gibi width:100% deneyebilirsiniz.

Genişliği yeterli gelmez:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Genişliği doldurur:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Küçük boyutu, daha küçük genişlik:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

GÜNCELLEME

İşte birkaç dakika sonra yapabileceğim en iyi şey. 1px kapalı FF, Chrome, Safari, ve mükemmel YANİ. (Sorun #^&* tutarlı değil yani, herkes farklı sınırlar geçerlidir.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>