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设置是p元素占用div元素的整个宽度。例如，div宽度为1360，p元素也为1360，但强宽度为184，输入宽度为16，它们都在同一条线上，p元素在水平线上溢出。

Answer 1

浮动：溢出;不存在，只能是左或右。

Answer 2

你需要漂浮左边的p。浮动所有剩余的东西会将它们全部捕捉到同一条线上（只要定位是相对的，你也应该这样做）

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

Answer 3

在您<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的{{1}}属性为<p>，就像block一样，它会占用宽度，除非你漂浮它。

Answer 4

始终使用display：inline将元素放在一行：

<强> 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/

如何获得输入 - 同一行上的强和p元素？

4 个答案: