html - チェックボックスの横のテキストがチェックボックスの下に入らないようにするにはどうすればよいですか？

Question

テキストが長い場合、チェックボックスはテキストの上に表示されます。テキストと同じ行にとどまるが、テキストが長い場合はテキストを分割するにはどうすればよいですか？つまり、テキストを入力しますwhite-space:normalが、チェックボックスとテキストの最初のビットは同じ行に残します。

 <input style="float: left" type="checkbox" ...etc..> <a href="...">my text</a>

Answer 1

labelとを使用するようにマークアップを修正しましたinputが、それは必須ではありません（チェックボックスを含めるために何かが必要です。例については、このjsFiddleを参照してください。

HTML：

<div class="container">
     <label><input type="checkbox"> My text - this label can be as long as you want it to be, see?</label>
</div>

CSS：

.container {
    width: 150px;
    background: red;
}

label {
    display: block;
    padding-left: 1em;
}

input {
    display: inline-block;
    margin-left: -1em;
}

の幅は.container、テキストが折り返されているときにこれが機能することを示すためにあります。これは、任意の幅で、何も修正されていないレスポンシブデザインで機能します。次のようになります。

そして、これがあなたのオリジナルのマークアップを使った例spanです（追加されて、私はあなたがそれを含めることができると仮定しています）：

<div class="container">
    <span><input type="checkbox"> <a href="#">My text - this label can be as long as you want it to be, see?</a></span>
</div>

Answer 2

更新：あなたにとっておそらく役立つ何か他のもの：

http://jsfiddle.net/persianturtle/FrEsX/3/

Hideはオーバーフローです。

このようなもの？

http://jsfiddle.net/persianturtle/vwfwh/3/

そうでない場合は、絵を描きます。

.container {
width: 150px;
height: 200px
}

input {
margin: 25px 25px 50px 50px;
float: left;
}

Answer 3

さて、私は固定幅を設定します。

a {
  display: inline-block;
  width: 100px; /*whatever number you need*/
}

Answer 4

 あなたは魔女が壊れないスペースのためのものを試すことができます。