Question

如果段落的行高超过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

有没有办法防止这种情况？

Answer 1

我不确定它的有效性和HTML的版本，但你可以用标签包装整个段落。

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

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

Answer 2

如果您不需要使用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;
}

See the fiddle.

如果您只添加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;
}

See the fiddle.

如果line-height大于1，则标签在行之间不起作用

2 个答案:

更新