Nice programing

이다

nicepro 2020. 12. 25. 22:55
반응형

이다
내부


저는 Bootstrap을 사용하고 있으며 수평 형태의 데모입니다.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1">
    </div>
  </div>
</form>

하지만 나는 각각에 대해 ID를 만들고 싶지 <input>않으므로

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

하지만 display:block내부 display:inline있을 수 없으므로 CSS를 사용합니다.

.block {
  display: block;
}

작동하지만 맞습니까? 요소 ( ) display:block요소를 넣지 말아야한다고 들었 기 때문에display:inlinelabel


아니요, HTML에서는 <label><div>.


라벨 요소의 사양을 참조하세요 .

콘텐츠 모델 : 구문 콘텐츠이지만 요소의 레이블이 지정된 컨트롤이 아닌 한 하위 레이블이있는 요소가없고 하위 레이블 요소가 없습니다.

구문 콘텐츠가 다음으로 연결되는 위치 :

구문 내용은 문서의 텍스트이자 단락 내부 수준에서 해당 텍스트를 표시하는 요소입니다. 일련의 구문 콘텐츠가 단락을 형성합니다.

a abbr area (지도 요소의 자손 인 경우) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text

참조 URL : https://stackoverflow.com/questions/18609554/is-div-inside-label-block-correct

반응형