如何在同一行上左右對齊兩個內聯塊元素？

在同一行上左右對齊兩個內聯塊

在現代Web 開發中，左右對齊兩個內聯塊元素在同一條線上可能是一項看似複雜的任務。然而，使用正確的技術可以簡化方法。

Flexbox

Flexbox 提供了一個簡單的解決方案。透過將 display: flex 應用於父容器並將 justify-content: space- Between 應用於其子容器，元素可以以相等的間距放置在容器的兩端。這可以輕鬆實現，如下所示：

<code class="css">.header {
    display: flex;
    justify-content: space-between;
}</code>

Text-Align: Justify

另一種技術涉及在父元素上使用text-align: justify 。然而，這需要額外的技巧來確保與舊版瀏覽器的兼容性：

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

為了防止在:after 偽元素後插入額外的空格，可以使用一個技巧：

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

將父元素的font-size設為0並為子元素重置它，可以解決問題。

以上是如何在同一行上左右對齊兩個內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！