如何在使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; 
}

樣品