如何在不使用表格的情況下水平對齊div？

沒有表格的Div 水平對齊

在網頁設計中，經常會出現水平對齊元素的情況，尤其是在分欄呈現內容時。雖然表格為此任務提供了簡單的解決方案，但它們的使用可能並不總是令人滿意。本文解決了在不借助表格的情況下水平對齊 div 元素的問題。

使用 Float 和父容器

水平對齊 div 的基本技術涉及使用 float 屬性。浮動使元素沿著指定方向移動，使其與相鄰元素對齊。要實現水平對齊，可以應用以下原則：

1. 建立父容器：將 div 包裹在父容器中。此容器將為水平對齊提供上下文。
2. 浮動 Div：將父容器中所有子 div 的浮動屬性設為「left」。這將導致 div 向左浮動。
3. Clear Float: 若要防止父容器折疊，請套用「clear: none;」子 div 的樣式。這樣可以確保父容器的高度不受浮動子 div 的影響。

4. 範例程式碼：

   .aParent div {
    float: left;
    clear: none; 
   }
   
   .aParent {
    /* Add any additional styles for the parent container here */
   }

   登入後複製

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
</div>

透過實作此方法，div 將水平對齊，同時保持指定的結構和間距。

以上是如何在不使用表格的情況下水平對齊div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！