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 回答
0

我不确定它的有效性以及在哪些版本的 HTML 中，但你可以用标签包裹整个段落。

<label for="xx">
    <p style="line-height: 2em;">
        <input type="checkbox" id="xx" /> ...
    </p>
</label>

演示：http: //jsfiddle.net/2nFdq/1/

于 2013-06-18T09:49:46.183 回答