Question

HTML：

<div id="demo">
<p id="p">blablabla</p>
<div id="d">zizizizi</div>
</div>

CSS：

#demo {
    width: auto;
}
#p {
    float: left;
    display: inline;
}
#d {
    float: right;
    display: inline;
}

I have created a JSBin for this to show the output:

JSBIN

我想要这个：

[blablabla]    [zizizizi]

而不是那样，它显示：

               [zizizizi]
[blablabla]

有谁知道这个的原因？以及如何解决这个问题？

Answer 1

<p>有一个默认的1em边距，导致它向下移动。

此外，display: inline无效，因为它被float样式覆盖。

Answer 2

使用此 CSS 设置填充：0px;和保证金：0px;在

#demo {width: auto;}
#p {float: left; 
display: inline;padding:0px; margin:0px;}
#d {float: right;
display: inline; margin:0;padding:0;}

Answer 3

要解决此问题，请将两个元素设为float：left

这将自动添加下一行的每个连续元素。

我将如何做到这一点

<强> HTML

<div class="box">
Content of box 1
</div>
<div class="box">
Content of box 2
</div>

<强> CSS：

.box{ float:left; display:inline}

如果要设置每个对象的宽度，也可以添加宽度css属性

Answer 4

只需移除浮动广告，然后将display:inline替换为display:inline-block。然后删除默认边距并且元素正确对齐，您只需要根据需要添加填充/边距：

#p, #d{display: inline-block; vertical-align:top; margin:0; }

为什么我的<p>和</p> <div>元素不符合显示：inline？</div>

4 个答案: