對齊複選框以標籤的第一線，防止包裝

我有這樣的一個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

對齊複選框以標籤的第一線，防止包裝

回答

相關問題