Bir etiket etiketinin genişliğini nasıl kontrol edebilirim?

144

Etiket etiketi 'width' özelliğine sahip olmadığından, bir etiket etiketinin genişliğini nasıl kontrol etmeliyim?

html css label

— ziiweb
kaynak

8

Etiket bir satır içi öğedir, genişlik değeri olamaz; Bunu yapmak için display:blockveya koymanız gerekir float:left.

— Russell Dias

188

Elbette CSS kullanmak ...

label { display: block; width: 100px; }

widthNitelik kalkmıştır ve CSS hep presentational stilleri bu tür kontrol etmek kullanılmalıdır.

— Josh Stodola
kaynak

7

Ama muhtemelen kodunda bir mola için potansiyel müşteriler OP şey bu değil ilk etapta istiyorum.

— Konrad Rudolph

49

@Konrad O zaman OP kullanabilir floatveyadisplay: inline-block

— Josh Stodola

2

Evet, almak istediğim şey bu. :-) Buradaki temel nokta, çünkü zor kısmı bu. Yalnızca ayarın widthpek faydası olmaz.

— Konrad Rudolph

@JoshStodola oh shiiiiit ..... inline-blok asla benim için kullanılan, ben float ve bham çalıştı! i-blok neden benim için çalışmadığını merak ediyorum

— Dheeraj

@lostchild inline-block boşlukları görmezden gelmez, bu yüzden onunla sorun yaşıyor olabilirsiniz.

— Alex Podworny

91

Satır içi bloğu kullanmak daha iyidir, çünkü kalan elemanları ve / veya kontrolleri yeni bir satıra çizmeye zorlamaz.

label {
  width:200px;
  display: inline-block;
}

— MA9H
kaynak

29

Satır içi öğeler (SPAN, LABEL, vb.), Yükseklik ve genişlik tarayıcı tarafından içeriklerine göre hesaplanacak şekilde görüntülenir. Yüksekliği ve genişliği kontrol etmek istiyorsanız, bu elemanların bloklarını değiştirmeniz gerekir.

display: block;öğeyi katı bir blok (DIV etiketleri gibi) olarak gösterir, bu da öğeden sonra satır sonu olduğu anlamına gelir (satır içi değil). display: inline-blockSatır sonu sorununu gidermek için kullanabilmenize rağmen , IE6 satır içi bloğu tanımadığından bu çözüm IE6'da çalışmaz. Tarayıcılar arası uyumlu olmasını istiyorsanız, şu makaleye bakın: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

— Srka
kaynak

4

Etikete genişlik vermek uygun bir yol değildir. bunu yönetmek için bir div veya tablo yapısı almalısınız. ancak yine de tüm kodunuzu değiştirmek istemiyorsanız aşağıdaki kodu kullanabilirsiniz.

label {
  width:200px;
  float: left;
}

— Yaxita Şah
kaynak

Bir etiket elemanının genişliğini kontrol etmek için "Etikete genişlik doğru şekilde verilmiyor" mu? Emin misiniz?

— Oriol

Evet .. Çünkü bir düzen veya belirli bir yapı oluşturmak istediğimizde div ve table özelliklerinin kullanılması sağlanmıştır. Etiket, genişlik veya yükseklik vermek için değildir. Bu nedenle, amaçlanmayan bir şey kullanırsak, bir şekilde sorunlar yaratmaya başlayacaktır. Umarım şimdi mantıklıyım.

— Yaxita Shah

2

label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}

— parlak
kaynak

1

Kesinlikle bu şekilde deneyebilirsiniz

.col-form-label{
  display: inline-block;
  width:200px;}

— Akarsh Srivastava
kaynak

0

Tüm etikete sınıf adı verebilirsiniz, böylece hepsinin genişliği aynı olur:

 .class-name {  width:200px;}

Misal

.labelname{  width:200px;}

veya basit bir etiket geri kalanı verebilir

label {  width:200px;  display: inline-block;}

— Ajinkya
kaynak