CSS와 함께 HTML 양식의 라디오 버튼에 대한 멀티 라인, 수직 및 수평으로 정렬 된 레이블을 어떻게 만들려면 어떻게해야합니까?

Question

다음 마크 업을 가정합니다.

<fieldset>
    <legend>Radio Buttons</legend>
    <ol>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
        <li>
            <input type="radio" id="x">
            <label for="x"><!-- Insert multi-line markup here --></label>
        </li>
    </ol>
</fieldset>

대부분의 브라우저 (IE6+, FF, Safari, Chrome에서 다음과 같이 보이도록 라디오 버튼 레이블을 어떻게 스타일링합니까?

Answer 1

다음 마크 업과 CSS를 사용하여 라디오 버튼 아래로 감싸지 않는 멀티 라인 레이블을 생성 할 수있었습니다.

<style type="text/css">
    fieldset input, label {
      float: left;
      display: block;
    }

    fieldset li {
      clear: both;
    }
</style>

<fieldset>
  <ol>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
  </ol>
</fieldset>

그러나 나는 사용할 수 없었다 :

fieldset label {
  vertical-align: middle;
}

라디오 버튼에 레이블을 수직으로 중앙에 중앙에있는 경우, 너비를 적용 할 때에도 (Dmitri Farkov의 답변에서 두 가지 제안. 내 주요 목적은 라디오 버튼 아래로 포장을 방지하는 것이 었 으므로이 솔루션은 당분간 괜찮습니다.

Answer 2

나는 이것이 모든 것을한다고 믿는다. 그러나 검증해야한다고 언급하지 않았으므로 인라인 블록 (-moz-inline-box) 디스플레이를 사용했습니다. 실제로 내가 가장 좋아하는 것 중 하나입니다.

여기에 작업 사본이 있습니다

Safari 3, Firefox 3 및 IE7에서 테스트.

    <style type="text/css">
ol{
    padding-left: 0;
    margin-left:0;
}

ol>li {
    list-style-type: none;
    margin-bottom: .5em;
}

ol>li input[type=radio] {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}

ol>li label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
</style>

Answer 3

위의 정말 긴 레이블을 처리하는 방법을 물었고 마침내 직접 해결했습니다. 다음은 해결책입니다 나의 문제. 어쩌면 그것은 당신을 도울 수 있습니까?

<style type="text/css">
  #master_frame { 
      background: #BBB;
      height: 300px;
      width: 300px;
  } 
  fieldset.radios { 
      border: none;
  } 
  fieldset fields { 
      clear: both;
  } 
  input { 
      float: left;
      display: block;
  } 
  label { 
      position: relative;
      margin-left: 30px;
      display: block;
  } 
</style>

<div id="master_frame">
  <fieldset class='radios'>
    <div class='field'>
      <input type="radio" id="a" />
      <label for="a">Short</label>
    </div>
    <div class='field'>
      <input type="radio" id="b" />
      <label for="b">
        A really long and massive text that does not fit on one row!
      </label>
    </div>
  </fieldset>
</div>

Answer 4

입력하고 둘 다 라벨을 붙입니다

float: left;
display: block;

레이블 및 입력의 폭을 설정합니다.

---

적용하다

clear: both;
 vertical-align: middle;

모든 리의.