Question

我在div中有一个复选框及其标签，如下所示：

<div>   
    <input style="float:left;" type="checkbox" id="check_1" name="check_1" value="" />  
    <label style="margin-left:20px;display:inline-block;float:left;" for="check_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque magna at purus vehicula, vitae tristique lorem euismod. Etiam convallis urna eget vehicula vulputate. Proin mauris orci, auctor ut neque sed, pharetra tempor leo. Donec sit amet nulla orci. Aliquam volutpat volutpat urna, vitae fermentum nunc bibendum id. Aenean tincidunt auctor interdum. Aliquam aliquet libero non convallis pharetra. Integer consectetur tellus placerat pretium elementum. Nam vulputate odio sed commodo placerat. Integer sagittis, diam vel tristique sagittis, dui nisl rutrum diam, et vestibulum orci mi vestibulum purus. Aenean tempus semper ipsum sit amet tincidunt. Nunc ultricies congue nisl, vitae varius erat eleifend ac. Sed ultricies orci ante, ac semper purus luctus sed. Praesent malesuada velit id nisi pulvinar dignissim. Aenean eleifend faucibus risus, at auctor quam. Pellentesque non porta feliu</label>
</div>

我正在尝试将复选框与标签的第一行对齐，并阻止标签文本包含在复选框下方。正如您所看到的here，我尝试将复选框浮动到标签的左侧，并在标签上添加一个边距，但这不起作用。类似的问题还有其他答案，但所有这些问题都在label标签内有输入元素（我不想这样）。好吗？

谢谢

Answer 1

在标签上使用display: block而不是display: inline-block;

<div>   
    <input style="float: left;" type="checkbox" id="check_1" name="check_1" value="" />  
    <label style="margin-left: 20px; display: block; float: left;" for="check_1">L...</label>
</div>

Fiddle

Answer 2

试试这个 -

<input style="vertical-align:top;" type="checkbox" id="check_1" name="check_1" value="" />  
<label style="display:inline-block; width: 400px;" for="check_1">Lorem</label>

演示 - jsFiddle

Answer 3

仅为两个元素提供宽度将对您的工作进行排序。试试这个：jfiddle demo

<div style ='width:100%;' >   
    <input style="width:5%;float:left;" type="checkbox" id="check_1" name="check_1" value="" />  
    <label style="width:85%;float:left;margin-left: 20px;" for="check_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque magna at purus vehicula, vitae tristique lorem euismod. Etiam convallis urna eget vehicula vulputate. Proin mauris orci, auctor ut neque sed, pharetra tempor leo. Donec sit amet nulla orci. Aliquam volutpat volutpat urna, vitae fermentum nunc bibendum id. Aenean tincidunt auctor interdum. Aliquam aliquet libero non convallis pharetra. Integer consectetur tellus placerat pretium elementum. Nam vulputate odio sed commodo placerat. Integer sagittis, diam vel tristique sagittis, dui nisl rutrum diam, et vestibulum orci mi vestibulum purus. Aenean tempus semper ipsum sit amet tincidunt. Nunc ultricies congue nisl, vitae varius erat eleifend ac. Sed ultricies orci ante, ac semper purus luctus sed. Praesent malesuada velit id nisi pulvinar dignissim. Aenean eleifend faucibus risus, at auctor quam. Pellentesque non porta feliu</label>
</div>

将复选框与第一行标签对齐并防止换行

3 个答案: