如何在使div的子元素垂直浮动的同时保持左右浮动？

Question

我正在重写现有网站的部分内容，非常想清理一些内容。 当前，在父div中的某些子元素float （左和右）的地方，我必须使用margin-top: 7px; 将左浮动的子元素向下推一点，使其与右浮动的子元素内联。

我不喜欢这样

以下是我希望看到的：

但这不是我所看到的。 相反，我看到了：

因此，我尝试了一些尝试以查看是否可以修复它。 原始代码是：

<div id="bottomHeader">
    <p>Some slogan here</p>
    <ul id="SocialLinks">
        <li><a href="#"><img src="~/!/Assets/Images/Twitter.png" alt="" /></a></li>
        <li><a href="#"><img src="~/!/Assets/Images/Facebook.png" alt="" /></a></li>
    </ul>
</div>

#bottomHeader { width: 80%; margin: 0 auto; }
#bottomHeader > p { text-align: left; }
#bottomHeader > p { text-align: right; }

左右对齐，但p元素高于ul元素。 我意识到这是因为两个元素的默认宽度均为100％。 因此， p元素将ul元素推到其下方。

所以然后我只是想，如果我使两个元素的最大宽度都为50％，那就没问题了。 但是，不。 当我这样做时，ul元素（应该是右对齐的）出现在中间的某个地方（几乎好像是左对齐的）。 因此，我将代码更改为：

#bottomHeader { width: 80%; margin: 0 auto; }
#bottomHeader > p { width: 50%; float: left; }
#bottomHeader > p { width: 50%; float: right; }

哪个有效。 但是 ，现在父div（请参见上图的深蓝色矩​​形）的高度小于其子元素的高度，如下所示：

但这还不太正确。 因为现在看起来div的子元素在其父div的外部和下方。 而且它还会破坏布局。

---

如何在使div的子元素垂直浮动的同时保持左右浮动？

Answer 1

也许display: inline-block是您想要的。

它使元素既充当块级框又充当内联级框。

像这样：

#bottomHeader { 
    width: 80%; 
    margin: 0 10% 0 10%; 
    background:pink; 
    display:inline-block;
    height: auto; 
}

样品