ฉันจะควบคุมความกว้างของแท็กฉลากได้อย่างไร

แท็กฉลากไม่มีคุณสมบัติ 'ความกว้าง' ดังนั้นฉันจะควบคุมความกว้างของแท็กฉลากได้อย่างไร

ใช้ CSS แน่นอน ...

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

widthแอตทริบิวต์ที่ถูกเลิกและ CSS ควรจะใช้ในการควบคุมเหล่านี้ชนิดของรูปแบบ presentational

การใช้ inline-block นั้นดีกว่าเพราะมันไม่ได้บังคับให้องค์ประกอบที่เหลืออยู่และ / หรือตัวควบคุมที่จะวาดในบรรทัดใหม่

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

องค์ประกอบแบบอินไลน์ (เช่น SPAN, LABEL และอื่น ๆ ) จะแสดงขึ้นเพื่อให้เบราว์เซอร์มีการคำนวณความสูงและความกว้างตามเนื้อหา หากคุณต้องการควบคุมความสูงและความกว้างคุณต้องเปลี่ยนบล็อคองค์ประกอบเหล่านั้น

display: block;ทำให้องค์ประกอบที่แสดงเป็นบล็อกทึบ (เช่นแท็ก DIV) ซึ่งหมายความว่ามีการแบ่งบรรทัดหลังจากองค์ประกอบ (มันไม่ได้อยู่ในบรรทัด) แม้ว่าคุณสามารถใช้display: inline-blockเพื่อแก้ไขปัญหาการแตกบรรทัด แต่โซลูชันนี้ไม่ทำงานใน IE6 เนื่องจาก IE6 ไม่รู้จักการบล็อกแบบอินไลน์ หากคุณต้องการให้สามารถใช้งานข้ามเบราว์เซอร์ได้ให้ดูที่บทความนี้: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

การให้ความกว้างกับป้ายกำกับไม่ใช่วิธีที่เหมาะสม คุณควรใช้โครงสร้าง div หนึ่งหรือโครงสร้างตารางเพื่อจัดการสิ่งนี้ แต่ถ้าคุณไม่ต้องการเปลี่ยนรหัสทั้งหมดคุณสามารถใช้รหัสต่อไปนี้ได้

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

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

OR 

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

OR 

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

คุณสามารถลองด้วยวิธีนี้ได้อย่างแน่นอน

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

คุณสามารถให้ชื่อคลาสกับป้ายกำกับทั้งหมดเพื่อให้ทุกคนมีความกว้างเท่ากัน:

 .class-name {  width:200px;}

ตัวอย่าง

.labelname{  width:200px;}

หรือคุณสามารถให้ส่วนที่เหลือของฉลากง่าย ๆ

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