Làm cách nào để kiểm soát độ rộng của thẻ nhãn?

144

Thẻ nhãn không có thuộc tính 'chiều rộng', vậy tôi nên kiểm soát độ rộng của thẻ nhãn như thế nào?

html css label

— ziiweb
nguồn

8

Nhãn là một yếu tố nội tuyến, nó không thể có giá trị chiều rộng; Để làm điều này, bạn cần phải đặt display:blockhoặc float:left.

— Russell Dias

188

Sử dụng CSS, tất nhiên ...

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

Các widththuộc tính được chấp nhận, và CSS nên luôn được sử dụng để kiểm soát các loại phong cách presentational.

— Josh Stodola
nguồn

7

Nhưng điều đó dẫn đến việc phá vỡ mã, đây có lẽ là điều mà OP không muốn ngay từ đầu.

— Konrad Rudolph

49

@Konrad Sau đó, OP có thể sử dụng floathoặcdisplay: inline-block

— Josh Stodola

2

Yup, đó là những gì tôi muốn nhận được. :-) Đây là khía cạnh cốt lõi ở đây, vì đây là phần khó khăn. Chỉ cài đặt widthsẽ không có nhiều sử dụng.

— Konrad Rudolph

@JoshStodola oh shiiiiit ..... khối nội tuyến không bao giờ được sử dụng để làm việc cho tôi, tôi đã thử float và bham! tôi tự hỏi tại sao khối nội tuyến không hoạt động với tôi

— Dheeraj

@lostchild inline-block không bỏ qua khoảng trắng, đó có thể là lý do tại sao bạn gặp vấn đề với nó.

— Alex Podworny

91

Sử dụng khối nội tuyến sẽ tốt hơn vì nó không buộc các phần tử và / hoặc các điều khiển còn lại được vẽ trong một dòng mới.

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

— MA9H
nguồn

29

Các phần tử nội tuyến (như SPAN, LABEL, v.v.) được hiển thị sao cho chiều cao và chiều rộng của chúng được trình duyệt tính toán dựa trên nội dung của chúng. Nếu bạn muốn kiểm soát chiều cao và chiều rộng, bạn phải thay đổi các khối của các thành phần đó.

display: block;làm cho phần tử được hiển thị dưới dạng một khối đặc (như các thẻ DIV) có nghĩa là có một ngắt dòng sau phần tử (nó không phải là nội tuyến). Mặc dù bạn có thể sử dụng display: inline-blockđể khắc phục sự cố ngắt dòng, nhưng giải pháp này không hoạt động trong IE6 vì IE6 không nhận ra khối nội tuyến. Nếu bạn muốn nó tương thích với nhiều trình duyệt thì hãy xem bài viết này: http://webjazz.blogspot.com/2008/01/getting-inline-block-usiness-across.html

— Srka
nguồn

4

Đưa chiều rộng cho Nhãn không phải là một cách thích hợp. bạn nên lấy một div hoặc cấu trúc bảng để quản lý này. nhưng nếu bạn không muốn thay đổi toàn bộ mã thì bạn có thể sử dụng mã sau.

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

— Yaxita Shah
nguồn

"Đưa chiều rộng cho Nhãn theo cách không phù hợp" để kiểm soát độ rộng của thành phần nhãn? Bạn có chắc không?

— Oriol

Có .. Bởi vì khi chúng ta muốn tạo một số bố cục hoặc cấu trúc cụ thể thì các thuộc tính div và bảng được cung cấp để sử dụng. Nhãn không có nghĩa là cho chiều rộng hoặc chiều cao .. vì vậy nếu chúng ta sử dụng thứ gì đó không có nghĩa là làm như vậy .. nó sẽ bắt đầu tạo ra các vấn đề theo một cách nào đó. Tôi hy vọng tôi có ý nghĩa bây giờ.

— Yaxita Shah

2

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

OR 

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

OR 

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

— sáng bóng
nguồn

1

Bạn chắc chắn có thể thử theo cách này

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

— Akarsh Srivastava
nguồn

0

Bạn có thể đặt tên lớp cho tất cả các nhãn để tất cả có thể có cùng chiều rộng:

 .class-name {  width:200px;}

Thí dụ

.labelname{  width:200px;}

hoặc bạn có thể đơn giản cho phần còn lại của nhãn

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

— Ajinkya
nguồn