html - 内部不需要的空间带有浮动元素

Question

我有一个<div>不调整内容（这是两个<p>元素）的问题。内容是浮动的。

• 我有一个<p>标签浮动到左边
• 我有一个<p>标签浮动到右侧
• 我<div>下面有一个带有 style="clear:both" 的空标签

尽管如此，<div>包含整个内容的 3 行高 - 而不是应该的 1 行。我缺少什么使它起作用？

Answer 1

我准备了一个小提琴，它运行良好 - 它一定是您的代码中的错误。向我们展示其中的一些片段。

例子

确保不paddings/margins/height/lineheight影响您div的 s 和ps (=reset browserdefaults!)。父母也div需要足够宽以容纳两者p。此外，如果您有非浮动内容，则顺序很重要。

Answer 2

<p>首先，将两个标签都向左浮动。

然后，确保<div>有足够大的宽度来容纳两个<p>标签。

在那之后，您应该能够将它们排成一行。

http://jsfiddle.net/myJ3W/1/

只是为了向您展示为什么向右浮动可能不是一个好主意（这实际上取决于您要做什么......对话框？）

如果使用float: right;，则在段落过长后格式会中断：

http://jsfiddle.net/myJ3W/3/

然而，如果你float: left;将它们都放入容器中，你可以确定它们会粘在盒子里：

http://jsfiddle.net/myJ3W/4/

同样，真的取决于你在这里想要达到的目标。

Answer 3

我相信<p>元素有一个 default margin，尝试设置margin为0px，这可能会删除间距。

Answer 4

最外层是否有足够的空间<div>使每条<p>线都是一行？如果没有，一个会在另一个之下崩溃。此外，您的清除两者<div>也将具有完整的行高。这是我应用于一个名为cb我在这些情况下应用的类的风格......

.cb
{
    clear:both !important;
    float:none !important;
    height:1px;
    line-height:0;
    margin:0;
    padding:0;
}