genişlik: <input> alanları için otomatik

123

Yeni başlayanlar CSS sorusu. width:autoBir display:blocköğenin 'mevcut alanı doldur' anlamına geldiğini düşündüm . Ancak bir <input>öğe için durum böyle 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>

O zaman iki soru:

Tam olarak hangi genişliğin tanımı var: otomatik ne demek? CSS belirtimi bana belirsiz görünüyor, ancak ilgili bölümü kaçırmış olabilirim.
Bir girdi alanı için beklenen davranışımı elde etmenin bir yolu var mı - yani. diğer blok seviyesi öğelerinin yaptığı gibi kullanılabilir alanı doldurun mu?

Teşekkürler!

css

— Richb
kaynak

ekranlı girişin

— Phrogz

@Phrogz Evet, bir kopya. Aradım ama bulamadım. Teşekkürler.

— richb

88

Bir <input>bireyin genişliği oluşturulur sizeöznitelik. Varsayılan size, otomatik genişliği yönlendiren şeydir.

width:100%Aşağıdaki örneğimde gösterildiği gibi deneyebilirsiniz .

Genişliği doldurmaz:

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

Daha küçük boyut, 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ğimin en iyisi. FF, Chrome ve Safari'de 1px kapalıdır ve IE'de mükemmeldir. (Sorun, # ^ & * IE'nin sınırları herkesten farklı uyguladığı için tutarlı olmamasıdır.)

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

— Ben
kaynak

24

Teşekkürler. genişlik:% 100 aynı şey değil. Kenar boşlukları veya kenarlık varsa, üst kutunun dışına taşacaktır.

— richb

1

İstediğiniz gibi ayarlamak için bunları açıkça ayarlayabilirsiniz, örneğin border:2px inset #eee; margin:-2px. Yine de kendim test etmedim ama bu çizgide bir şey.

— Ben

3

Teşekkürler Steve. Ayrıca başka ilginç fikirlerin olduğu stackoverflow.com/questions/1030793/… sitesine de bakmalısınız .

— richb

1

Giriş alanlarında css aracılığıyla tutarlı genişlikler için epik çözüm, +1

— Stephen Sprinkle

11

sınırın kapsayıcıyla örtüşmesini önlemek için inputs box-sizeing özelliğini border-box olarak ayarlamayı kullanabilirsiniz.

— Nicholas

26

"Genişliğin tam olarak ne anlama geldiğine dair bir tanım var mı: otomatik? CSS spesifikasyonu bana belirsiz görünüyor, ancak belki ilgili bölümü kaçırmışımdır."

Orijinal posterin sorusunun yukarıdaki kısmına kimse cevap vermedi.

Cevap şudur: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Genişlik değeri otomatik olduğu sürece, elemanın kapsayıcısından daha geniş olmadan yatay kenar boşluğu, dolgusu ve bordürü olabilir ...

Öte yandan, genişlik:% 100 belirtirseniz, öğenin toplam genişliği, içerdiği bloğun% 100'ü artı herhangi bir yatay kenar boşluğu, dolgu ve kenarlık olacaktır ... İstediğiniz bu olabilir, ancak büyük olasılıkla değildir .

Farkı görselleştirmek için bir örnek yaptım: http://www.456bereastreet.com/lab/width-auto/

— tepki
kaynak

4

güzel cevap / bağlantı, "box-sizeing: border-box" ile üçüncü bir örnek koymanızı öneririm ...

— yarım bit

bu bir girdi için değil ve varsayılan otomatik olduğundan, bu kadar kullanışlı olduğunu görmüyorum

— Barbz_YHOOL

9

Diğer yanıtta belirtildiği gibi, genişlik: auto, girişin size özelliği tarafından oluşturulan genişlik nedeniyle çalışmaz, bu özellik "auto" veya benzeri bir şeye ayarlanamaz.

Kutu modeliyle güzelce oynamasını sağlamak için kullanabileceğiniz birkaç geçici çözüm var, ancak bildiğim kadarıyla harika bir şey yok.

İlk olarak, yüzdelikleri kullanarak alandaki dolguyu ayarlayabilir, genişliğin toplamının% 100'e ulaştığından emin olabilirsiniz, örneğin:

input {
  width: 98%;
  padding: 1%;
}

Deneyebileceğiniz başka bir şey, sol ve sağ 0'a ayarlanmış mutlak konumlandırmayı kullanmaktır. Bu işaretlemeyi kullanarak:

<fieldset>
    <input type="text" />
</fieldset>

Ve bu CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Bu mutlak konumlandırma, girdinin dolgusu veya kenar boşluğu ne olursa olsun, girdinin üst alan kümesini yatay olarak doldurmasına neden olur. Bununla birlikte, bunun büyük bir dezavantajı, şimdi alan setinin yüksekliğiyle uğraşmak zorunda olmanızdır; bu, siz ayarlamadığınız sürece 0 olacaktır. Girişlerinizin hepsi aynı yüksekliğe sahipse, bu sizin için işe yarayacaktır, sadece alan setinin yüksekliğini girişin yüksekliği ne olursa olsun ayarlayın.

Bunun dışında bazı JS çözümleri var, ancak JS ile temel stil uygulamayı sevmiyorum.

— Jon Raasch
kaynak

8

Çünkü input'ın width' s tarafından kontrol edilir sizeözniteliği nasıl budur başlatmak bir input widthiçeriğine göre:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
kaynak

1

Bu #angularspesifik cevap OP'nin sorusuna geçerli bir cevap olmasa da (ve ben oy vermiyorsam), bu konuya sadece bu belirli fikri bulmak için geldim.

— nobug

5

Tam olarak istediğiniz şey olmayabilir, ancak benim geçici çözümüm, otomatik genişlik stilini bir sarmalayıcı div'e uygulamak ve ardından girdinizi% 100 olarak ayarlamaktır.

— mwilcox
kaynak

0

Aklıma gelen tek seçenek kullanmak width:100%. Girdi alanında da bir dolgu olmasını istiyorsanız, sadece labeletrafına bir kap yerleştirmek yerine, biçimlendirmeyi o etikete taşıyın ve aynı zamanda etiketin dolgusunu da belirtin. Giriş alanları katıdır.

— Lajos Meszaros
kaynak

0

Cevap 1 - "cevap" buna güzel bir cevap / bağlantı verdi. Kısaca söylemek gerekirse, "otomatik" varsayılan değerdir, bu nedenle bir öğenin genişliğindeki herhangi bir değişikliği kaldırmak gibidir.

Cevap 2 - width: 100%onun yerine kullanın. Üst kapsayıcının% 100'ünü, bu durumda "formu" dolduracaktır.

— Akhil Gupta
kaynak

-4

Kesinlikle harika bir özelliği açıklayan kesinlikle harika bağlantılar:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Ana fikir:

Öğeleri ile bir kaba koyun display: flex;.
flex-grow: 1;İçerdiği öğelerin her birine ayarlayın .
İçerdiği öğeler içinde büyümesi gereken öğeler varsa, içerilen öğeler ve (içerilen) alt öğeleri için 1. ve 2. adımları tekrarlayın.
Değişen ihtiyaçlara göre uyarlayın ve ayarlayın (bağlantılara bakın).

Düzenleme - örnek :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrew
kaynak

Bu, girişler için otomatik genişliğe nasıl yardımcı olur?

— kernel

@ çekirdek Basit. Örneğe bakın.

— Andrew

Girişin genişliği her zaman% 100'dür ve mümkün olan asgari düzeyde değildir.

— çekirdek

2

Giriş, soru olan içeriğiyle hala aynı genişlikte değil.

— çekirdek

Kabul edilenleri okursanız - ve ayrıca başkalarınınkini - cevaplayın, farklı bir şey yapar. O zaman soru, "herkesin yanlış yaptığı neyi doğru yapıyorsun?" Olacaktır.

— çekirdek