50

チェックボックスと次のテキストを同じ行に強制的に表示するにはどうすればよいですか？次のHTMLでは、入力とラベルの間ではなく、ラベルと入力の間で行を区切るだけにします。

<p><fieldset>
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">
    <!-- depending on width, a linebreak can occur here. -->
    <label for="b">b</label>
    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

明確にするために：fieldset / pがすべての要素に対して十分に広くない場合、代わりに：

[] a [] b []
c [] d [] e

が欲しいです：

[] a [] b
[] c [] d
[] e
4

6 に答える 6

40

各アイテムをdivでラップしても壊れません。以下のリンクで私のフィドルをチェックしてください。フィールドセットの幅を125ピクセルにし、各アイテムの幅を50ピクセルにしました。ラベルとチェックボックスが新しい行に並んで表示され、壊れることはありません。

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

于 2012-05-06T10:42:01.987 に答える
32

このCSSを試してください：

label {
  display: inline-block;
}
于 2012-05-06T08:39:45.337 に答える
22

これを試して。以下では、チェックボックスとラベルを一意の要素と見なしています。

<style>
  .item {white-space: nowrap;display:inline  }
</style>
<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">aaaaaaaaaaaa aaaa a a a a a a aaaaaaaaaaaaa</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak NEVER occurs here. -->
    <label for="b">bbbbbbbbbbbb bbbbbbbbbbbbbbbbb  b b b b  bb</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">ccccc c c c c ccccccccccccccc  cccc</label>
</div>
</fieldset>
于 2012-11-13T11:15:06.673 に答える
8

cssだけでこれを行う別の方法：

input[type='checkbox'] {
  float: left;
  width: 20px;
}
input[type='checkbox'] + label {
  display: block;
  width: 30px;
}

これにより、オーバーフローが発生した場合にのみそうするのではなく、各チェックボックスとそのラベルが別々の行に強制されることに注意してください。

于 2015-07-02T02:33:54.617 に答える
4

入力の周りにラベルをラップできます。

 **<label for="a"><input type="checkbox" id="a">a</label>**

これは私のために働いた。

于 2019-11-18T18:02:10.627 に答える
0

http://jsbin.com/etozop/2/edit

put a div wrapper with WIDTH :

  <p><fieldset style="width:60px;">
   <div style="border:solid 1px red;width:80px;">
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">

    <label for="b">b</label>
   </div>

    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

名前はとても長い「ジョン・ウィンストン・オノ・レノン」かもしれません...それであなたは何をしたいですか？（長さはわかりません）...「johnwinston o ....」のように、x文字の後にラップする関数を作成できます。

于 2012-05-06T08:48:21.377 に答える