14

チェックボックスを表示し、その後にその下に回り込むテキストを表示したいと考えています。CSS を含まない HTML は次のようになります。

<input type="checkbox" checked="checked" />
<div>Long text description here</div>

次のように表示したい：

X   Long Text
    Description
    Here

現在、このようにラップアラウンドしています

X   Long Text
Description Here

これはテーブルで簡単に行うことができますが、他の理由で CSS にする必要があります。DIV の代わりに display: inline-block / float: right / clear / spans の組み合わせが機能すると考えましたが、これまでのところ運がありません。

4

2 に答える 2

7

チェックボックスとラベルをコンテナdiv（またはli-私はリストを含むフォームを頻繁に実行します）でラップし、適用します

<div class="checkbox">
  <input type="checkbox" id="agree" />
  <label for="agree">I agree with checkbox</label>
</div>




.checkbox input {
      float:left; 
      display:block;
      margin:3px 3px 0 0;
      padding:0;
      width:13px;
      height:13px;
     }

.checkbox label {
      float:left;
      display:block;
      width:auto;
     }
于 2010-02-11T09:14:17.277 に答える
5

これを試して：

input { float: left; }
div { margin-left: 40px; }

必要なスペースに合わせて調整しmargin-leftます。チェックボックスをオンにするfloat: leftと、基本的にブロックレイアウトから外れるため、テキストが押し下げられません。

于 2010-02-11T09:15:12.773 に答える