如何在一行上左右對齊內聯塊？

在單行上左右對齊內聯塊

使用內聯塊時，精確對齊它們可能具有挑戰性在一條線上。本文針對這個問題提供了兩種解決方案：Flexbox 和文字對齊對齊。

Flexbox 解決方案

Flexbox 提供了一個優雅而簡潔的解決方案。透過應用程式顯示：flex；到父容器並對齊內容：空間之間；要對齊子元素，您可以輕鬆實現所需的對齊方式。

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

文字對齊對齊解決方案

使用文字對齊對齊是另一個可行的選擇。以下是一個範例CSS 程式碼，將該技術與一些特定於瀏覽器的技巧相結合，以實現更好的兼容性：

<code class="css">.header {
  background: #ccc; 
  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;
}

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

  /* ie 7*/ 
  *display: inline;
  *zoom: 1;
  *text-align: left; 
}

.nav {
  display: inline-block;
  vertical-align: baseline; 

  /* ie 7*/
  *display: inline;
  *zoom:1;
  *text-align: right;
}</code>

此方法適用於不同的瀏覽器，包括IE7 及更高版本。

請記住，如果內聯區塊元素不是用空格分隔的，文字對齊對齊解決方案可能不起作用。此外，將父元素的 font-size 設為 0 並將其重置回子元素所需的值可以幫助刪除 after 偽元素引入的額外空間。

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