css - how to get the input - strong and p elements on the same line? -

css - how to get the input - strong and p elements on the same line? -

i have next html content.

<div><input type="checkbox"><strong></strong><p></p></div>

how these elements on same line p element no-wrap?

i tried this:

input { float: left; margin: 0; padding: 0; } strong { float: left; margin: 0; padding: 0; } p { margin: 0; padding: 0; white-space: nowrap; }

what don't understand css setting p element takes entire width of div element. example, div width 1360 , p element 1360 yet strong width 184 , input width 16 , fit on same line p element overflowing on horizontal line.

after give <p> float:left;, must give <div> overflow:hidden;.

and if lower <input> little bit, give margin-top.

check demo.

css

div { overflow:hidden; } input { float: left; margin: 0; padding: 0; } strong { float: left; margin: 0; padding: 0; } p { margin: 0; padding: 0; float:left; white-space: nowrap; }

the reason why <p> takes total width, it's because display property of <p> block, <div>, take total width unless float it.

css css-float