라벨 태그의 너비를 어떻게 제어 할 수 있습니까? 없으므로 레이블 태그의 너비를 어떻게

레이블 태그에는 ‘width’속성이 없으므로 레이블 태그의 너비를 어떻게 제어해야합니까?

답변

물론 CSS를 사용하여 …

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

이 width속성은 더 이상 사용되지 않으며 CSS는 항상 이러한 종류의 프리젠 테이션 스타일을 제어하는 ​​데 사용해야합니다.

답변

인라인 블록을 사용하면 나머지 요소 및 / 또는 컨트롤이 새 라인에 그려지지 않으므로 더 좋습니다.

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;}