如何在同一行上對齊內聯區塊：Flexbox 與文字對齊？

在同一行上對齊內聯塊：綜合解決方案

雖然在同一行上對齊內聯塊可能具有挑戰性，但有一些有效的解決方案可用。讓我們深入研究兩種常用的方法。

選項 1：Flexbox

Flexbox 提供了一種簡單且靈活的方法來實現所需的對齊。透過應用程式顯示：flex；對於父容器，您可以使用 justify-content: space- Between; 操縱其子容器的位置。這種方法提供了出色的跨瀏覽器相容性。

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

選項 2：文字對齊

為了更廣泛的瀏覽器支持，您可以利用 text-align: justify 技術以及 star-hacks舊版本的 Internet Explorer。

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

h1 {
  display: inline-block;
  margin-top: 0.321em;
}

.nav {
  display: inline-block;
  vertical-align: baseline;
}</code>

此方法透過使用:after 偽元素添加空元素來解決內聯塊元素之間缺乏分隔的問題：

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

到消除:after 偽元素造成的額外空間，將父元素的font-size 設為0，並將子元素重設為所需的值：

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

以上是如何在同一行上對齊內聯區塊：Flexbox 與文字對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！