如何在保持垂直堆疊的同時將 DIV 元素右對齊？

將DIV 元素右對齊

問題：

在HTML 文檔中，對齊右側側的多個DIV 元素可能會導致元素失去垂直堆疊並最終水平排列的問題。

分析：

使用「float: right」對齊 DIV 可能會導致此問題，尤其是當 DIV 包含在父 DIV 中時。在這種情況下，浮動 DIV 將從文件的正常流程中移除，並彼此相鄰放置。

解：

在保留的同時實現右對齊垂直堆疊，另一種方法是使用以下CSS 屬性：

margin-left: auto;

• 此屬性會自動調整DIV 的左邊距將其推向其父容器的右側。

margin-right: 0;

• 此屬性消除了任何右邊距，確保 DIV與其容器的右邊緣保持齊平。

範例：

這是使用這些屬性提供的程式碼的改進版本：

<code class="css">#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  margin-left: auto;
  margin-right: 0;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}</code>

透過使用這些屬性，按鈕和表單將向右對齊，按預期一個接一個地垂直堆疊。

以上是如何在保持垂直堆疊的同時將 DIV 元素右對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！