Bagaimana saya bisa mengontrol lebar tag label?

144

Tag label tidak memiliki properti 'lebar', jadi bagaimana saya harus mengontrol lebar tag label?

html css label Ziiweb
sumber
8
Label adalah elemen inline, tidak dapat memiliki nilai lebar; untuk melakukan ini, Anda harus meletakkan display:blockatau float:left.
Russell Dias

Jawaban:

188

Menggunakan CSS, tentu saja ...

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

The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

Josh Stodola
sumber
7
But that leads to a break in the code, which is probably what the OP doesn’t want in the first place.
Konrad Rudolph
49
@Konrad Then the OP can use float or display: inline-block
Josh Stodola
2
Yup, itulah yang ingin saya dapatkan. :-) Ini adalah aspek inti di sini, karena ini adalah bagian yang sulit. Pengaturan hanya widthtidak akan banyak digunakan.
Konrad Rudolph
@JoshStodola oh shiiiiit ..... inline-block tidak pernah bekerja untuk saya, saya mencoba float dan bham! Saya bertanya-tanya mengapa blok sebaris tidak bekerja untuk saya
Dheeraj
@lostchild inline-block tidak mengabaikan spasi putih, itu mungkin mengapa Anda mengalami masalah dengannya.
Alex Podworny
91

Menggunakan inline-block lebih baik karena tidak memaksa elemen dan / atau kontrol yang tersisa untuk digambar di baris baru.

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

Elemen sebaris (seperti SPAN, LABEL, dll.) Ditampilkan sehingga tinggi dan lebarnya dihitung oleh browser berdasarkan kontennya. Jika Anda ingin mengontrol tinggi dan lebar Anda harus mengubah blok elemen-elemen itu.

display: block;membuat elemen ditampilkan sebagai blok padat (seperti tag DIV) yang berarti bahwa ada jeda baris setelah elemen (itu bukan inline). Meskipun Anda dapat menggunakan display: inline-blockuntuk memperbaiki masalah line break, solusi ini tidak berfungsi di IE6 karena IE6 tidak mengenali inline-block. Jika Anda ingin ini kompatibel lintas-browser, maka lihat artikel ini: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Srka
sumber
4

Memberi lebar pada Label bukanlah cara yang tepat. Anda harus mengambil satu div atau struktur tabel untuk mengelola ini. tetapi tetap jika Anda tidak ingin mengubah seluruh kode Anda maka Anda dapat menggunakan kode berikut.

label {
  width:200px;
  float: left;
}
Yaxita Shah
sumber
"Memberi lebar pada Label bukan cara yang tepat" untuk mengontrol lebar elemen label? Apakah kamu yakin
Oriol
Ya .. Karena ketika kita ingin membuat beberapa tata letak atau struktur tertentu maka properti div dan tabel disediakan untuk digunakan. Label tidak dimaksudkan untuk memberi lebar atau tinggi .. jadi jika kita menggunakan sesuatu yang tidak dimaksudkan untuk melakukannya .. itu akan mulai membuat masalah dengan beberapa cara. Saya harap saya masuk akal sekarang.
Yaxita Shah
2 
label {
  width:200px;
  display: inline-block;
}

OR 

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

OR 

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

Anda pasti dapat mencoba cara ini 

.col-form-label{
  display: inline-block;
  width:200px;}
Akarsh Srivastava
sumber
0

Anda bisa memberikan nama kelas untuk semua label sehingga semua dapat memiliki lebar yang sama:

 .class-name {  width:200px;}

Contoh 

.labelname{  width:200px;}

atau Anda dapat dengan mudah memberikan sisa label 

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