html - 为什么我的 <p> 和 <div> 元素不服从显示 : inline?

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 margin ，这导致它向下移动。

另外，display: inline不会有任何效果，因为它被 float 覆盖了风格。