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

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