对齐复选框以标签的第一线，防止包装

我有这样的一个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，我尝试将复选框浮动到标签的左侧，并向标签添加一个空白边界，但这不起作用。还有类似的问题的其他答案，但它们都有标签标签内的输入元素（我不希望那样）。请任何想法吗？

谢谢

来源

2013-07-14 user765368

+1 :-)：试试这个 – steveax

使用display: 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

来源

2013-07-14 02:54:03 steveax

试试这个 -

<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

标签，而不是 display: inline-block上

来源

2013-07-14 02:51:25 Pete

只提供宽度两个元素将你的工作理清。使用`for`属性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>

来源

2013-07-14 03:54:43 sourcecode

对齐复选框以标签的第一线，防止包装

回答

相关问题