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

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 ，我尝试将复选框 float 到标签的左侧，并向标签添加一个 margin-left，但这没有用。类似问题还有其他答案，但所有答案都在 label 标签内有 input 元素(我不想要那样)。有什么想法吗？

谢谢

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