Bloki wbudowane i zawijanie tekstu za pomocą CSS

Question

Chcę wyświetlić pole wyboru, a następnie tekst, który zawija się poniżej. HTML bez CSS wygląda następująco:

<input type="checkbox" checked="checked" /> 
<div>Long text description here</div> 

chcę, aby wyświetlić podobne do:

X Long Text 
    Description 
    Here 

Obecnie otacza się ten

X Long Text 
Description Here 

to łatwo zrobić z tabele, ale potrzebuję, aby był w CSS z innych powodów. Pomyślałem, że kombinacja wyświetlacza: inline-block/float: right/clear/spans zamiast DIV zadziała, ale do tej pory nie miałem szczęścia.

Answer 1

Wrap pole wyboru i etykiety w div pojemnika (lub Li - I do formy z listami często) i zastosować

<div class="checkbox"> 
    <input type="checkbox" id="agree" /> 
    <label for="agree">I agree with checkbox</label> 
</div> 




.checkbox input { 
     float:left; 
     display:block; 
     margin:3px 3px 0 0; 
     padding:0; 
     width:13px; 
     height:13px; 
    } 

.checkbox label { 
     float:left; 
     display:block; 
     width:auto; 
    } 

Answer 2

Spróbuj tego:

input { float: left; } 
div { margin-left: 40px; } 

dostroić margin-left się, ile miejsca chcesz. Opcja float: left w polu wyboru zasadniczo usuwa ją z układu bloków, aby nie wciskać tekstu.