как получить входные данные - сильные и p элементы в одной строке?

Question

У меня есть следующий html-контент.

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

Как получить эти элементы в одной строке с элементом p без обертки?

Я попытался это:

input 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

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

То, что я не понимаю, об этой настройке CSS является то, что р элемент занимает всю ширину элемента DIV. Например, ширина div равна 1360, а элемент p также равен 1360, но при этом сильная ширина составляет 184, а ширина ввода - 16, и все они помещаются в одну и ту же строку с элементом p, переполненным по горизонтальной линии.

Answer 1

После того, как вы даете <p> на float:left;, вы должны дать <div> в overflow:hidden;.

И если вы хотите немного опустить <input>, то дайте ему margin-top.

Проверьте это 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; 
} 

Причина <p> занимает всю ширину, это потому, что display свойство <p> является block, так же, как <div>, это займет всю ширину, если вы не всплывут его.

Answer 2

float: overflow; не существует, он может быть только левым или правым.

Answer 3

Вам нужно поплавать слева. Плавающие все осталось лопнет их все на одной и той же линии (при условии, что позиционирование является относительным, что вы должны делать, а)

p{ 
float: left; 
position: relative; 
margin: 0; 
padding: 0;} 

Answer 4

всегда использовать дисплей: рядный поставить элементы на линии:

HTML:

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

CSS:

input{ 
    float: overflow; 
    margin: 0; 
    padding: 0; 
} 

strong 
{ 
    float: overflow; 
    margin: 0; 
    padding: 0; 
} 
p 
{ 
    display:inline; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
} 

http://jsfiddle.net/bpze6/1/