View the code and screenshots. The question is: when there is not enough space for the text and a line break occurs, it starts from the left edge, under the check. I need it to be located exactly under the beginning of the first line. I tried to wrap the text in a paragraph and play with text-indent , margin-left:-20px . But since the text takes a block type, it falls to the line below from the checkbox. If you wrap the text in <ul> and remove all indents, the checkbox "sticks to the bottom line. Most likely the question is stupid, but I can’t come up with an adequate solution without using &nbsp; and positioning the elements. Thanks in advance for the help!

 <div class="answer_check"> <input type="checkbox" /> <label style="" class="area_box"> провСсти ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ инструктаТи ΠΏΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ бСзопасности ΠΈ производству Ρ€Π°Π±ΠΎΡ‚ </label> </div>

The essence of the problem <Ul> list <p> + negative indent

    3 answers 3

     .answer_check: {display:table;} .answer_check input, .answer_check label {display: table-cell;}

    Needless to say, this is in styles.

      I think you need to use a table layout, here’s an option using blocks, although you can just shove everything into the table and set the table to border = "0"

       .answer_check { display: table-row; } .answer_check .column { display: table-cell; } 
       <div class="answer_check"> <div class="column"><input type="checkbox"/></div> <div class="column"><label style="" class="area_box">ΠŸΡ€ΠΎΠ²Π΅ΡΡ‚ΠΈ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ инструктаТи ΠΏΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ бСзопасности ΠΈ производству Ρ€Π°Π±ΠΎΡ‚. ΠŸΡ€ΠΎΠ²Π΅ΡΡ‚ΠΈ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ инструктаТи ΠΏΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ бСзопасности ΠΈ производству Ρ€Π°Π±ΠΎΡ‚</label></div> </div>

        Wrap the text in a paragraph and input-Ρƒ set float:left;

         <div class="answer_check"> <input type="checkbox" style="float:left;" /> <label style="" class="area_box"> <p>провСсти ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ инструктаТи ΠΏΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ бСзопасности ΠΈ производству работровСсти ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ инструктаТи ΠΏΠΎ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅ бСзопасности ΠΈ производству Ρ€Π°Π±ΠΎΡ‚</p> </label> </div>

        • For me for some reason, this led to the fact that the paragraph went to the next line from the checkbox - sanjoyz
        • Master-master ... You know better - Air