0

私は登録フォームを持っていてfieldset、inputフィールドを 2 行で並べていました。

次に、それらの下にチェックボックスを追加する必要があります。もちろん、 を使用して行うこともできますが、divに統合したいと考えていfieldsetます。

これがフィドルの例です。

最後のリスト項目 ( class を持つものfd)の下にチェックボックスを追加し、その横にそのラベルを追加する必要があります。

最終的には、次のようになります。

   label 1                         label 2
    _______________                 _______________ 
   (_______________)               (_______________)

    label 3                        label 4
    _______________                 _______________ 
   (_______________)               (_______________)


   (_) label 5

この時点で、次のコードがあります。

...
<li class="fd">
<label class ="tandc">label 5</label>
  <input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" />
</li>


</ul>
</fieldset>
</form>

そしてCSSに関しては：

.tc  {
    float: right;
}
.tac {
    width: 20px;
    margin-bottom: 20px;
}


.tandc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
    width: 450px;
    float:right;
    margin-right: 25px;
    padding-top: 3px;

}

私の問題は、ラベルをチェックボックスの上にしか取得できず、その横には取得できないことです。チェックボックスの横にラベルを付ける方法を誰か教えてもらえますか? HTML を変更してもかまいませんが、テーブルの使用は避けてください。

4

1 に答える 1

1

.tc クラスを使用してどの要素がスタイル設定されているかわかりませんが、チェックボックスの後にラベルを移動し、float:rightクラス用に持っていたラベルを削除した.tandcところ、説明しようとしているように見えます。

これはあなたが探しているものかもしれませんか？

編集

更新されたcss

.tandc {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #ECECEC;
text-decoration: none;
width: 450px;
height: 30px;
display:inline-block;
}

html

....
<li class="fd">
<input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" />
<label class ="tandc">label 5</label>
</li>
</ul>
</fieldset>
</form>

この<li>要素には特定のクラスと ID があるため、必要に応じて個別に配置できるはずです。

編集

あなたの完全な css を見た後、すべての入力フィールドがブロックとして表示されるように指定していることに気付きました。つまり、div 要素 (チェックボックスはこれらの入力フィールドの 1 つです) のように、入力フィールドと同じ行に他の要素を配置することはできません。必要なことは、この特定の入力ボックスにインラインで他の要素を含めることができることを指定することです。class .tandc または id #tandc に追加するだけですdisplay:inline-block。

于 2012-06-21T15:54:13.957 に答える