0

段落の行の高さが 1em より大きい場合、ラベル タグは行間で機能しません。

<p style="line-height: 2em;"><input type="checkbox" id="xx" /> 
<label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id.
</label></p>

ここを参照してください：jsfiddle

それを防ぐ方法はありますか？

4

2 に答える 2

0

label for=""構文を使用する必要がない場合は、次のことができます。

HTML:

<p style="line-height: 2em;">
  <label>
    <input type="checkbox" id="xx" />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
  </label>
</p>

CSS:

label{
  display:block;
}

フィドルを参照してください。

CSS スタイルを追加するだけの場合の機能は似ていますが、チェックボックスのスタイルを設定して、ラベル テキストにうまく配置する必要があります。(ラベル テキストは独自のブロックを占有します。このソリューションでは、ブロック スペースをチェックボックスと共有します。)

アップデート

CSS と構文を使用した代替ソリューションを次に示しlabel for=""ます (CSS を使用してください。インライン スタイルの維持は困難です)。

<p><input type="checkbox" id="xx" />
  <label for="xx">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quis magna sed varius. Suspendisse scelerisque cursus nunc et pulvinar. In nec metus dolor. Fusce blandit leo quis nulla scelerisque dignissim. Mauris fermentum diam sed metus venenatis pellentesque. Maecenas tellus lacus, condimentum in nibh et, ornare pharetra felis. Fusce mollis libero nisl, eu sodales mauris sagittis id. Maecenas semper nisi et augue imperdiet rutrum. Vivamus at viverra metus! Quisque eleifend cursus massa, sed facilisis diam ultrices ac. Nulla facilisi. Donec auctor adipiscing tellus id interdum. Nullam sodales libero sed lacus consectetur sollicitudin. Maecenas lacinia risus in lectus tincidunt, quis luctus turpis sollicitudin.
  </label>
</p>

CSS:

label{
  line-height:2em;
  display:block;
}

input[type="checkbox"]{
  float:left;
  position:relative;
  margin:.5em .5em 0 0;
}

フィドルを参照してください。

于 2013-06-18T11:27:34.157 に答える