css - 如何在同一行获取输入 - strong 和 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 设置的不理解是 p 元素占据了 div 元素的整个宽度。例如，div 宽度为 1360，p 元素也是 1360，但 strong 宽度为 184，输入宽度为 16，它们都适合同一行，而 p 元素溢出在水平线上。

Answer 1

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

Answer 2

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

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

Answer 3

在你给<p>a之后float:left;，你必须给<div>a overflow:hidden;。

如果你想降低<input>一点，那就给它一个margin-top.

检查这个演示。

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