3

我在这样的 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>

我正在尝试将复选框与标签的第一行对齐，并防止标签文本在复选框下方换行。正如您在此处看到的，我尝试将复选框浮动到标签左侧并在标签上添加一个 margin-left，但这不起作用。对于类似的问题还有其他答案，但它们都在标签标签内有输入元素（我不想要那个）。请问有什么想法吗？

谢谢

4

3 回答 3

3

在标签上使用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>

小提琴

于 2013-07-14T02:54:03.673 回答
0

试试这个 -

<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

于 2013-07-14T02:51:25.533 回答
0

只为这两个元素提供宽度将整理您的工作。试试这个：jfiddle 演示

<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-14T03:54:43.403 回答