どのように私は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、サファリ、クロームのように見えるように、

はどのようなスタイルのラジオボタンのラベル行います

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

ドミトリFarkovの答えに（両方の提案を幅を適用した場合であっても、ラジオボタンを縦にラベルを中央に。私の主な目的は、ラジオボタンの下にラップを防ぐためだったので、この解決策は当面の罰金となります。

Answer 2

私は、これはそれをすべてを行うと信じています。あなたは、それはしかし、検証するために持っていることを言及していなかったので、私はインラインブロック（-moz-インラインボックス）ディスプレイを使用しました。私のお気に入りの一つ、実際ます。

ここで作業コピーのだ。

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

すべての李さんへ。