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

沒有表格的水平 Div 對齊

在 HTML 中，有多種對齊元素的方法。雖然使用表格對齊 div 很簡單，但有些人更喜歡非表格方法。以下是如何在不依賴表格的情況下實現div 水平對齊：

使用CSS Float 和Clear

1. 建立父div： 將您想要的兩個div 包裹起來在父div 中對齊。
2. 浮動 div： 增加浮動：左；子 div 的屬性。這將使它們浮動到其父級的左側。
3. 清除浮動：要防止子 div 垂直堆疊，請新增clear: none;父 div 的屬性。這將防止元素環繞浮動 div。

範例程式碼

.aParent div {
    float: left;
    clear: none; 
}

<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 並避免必須求助網頁中的表格版面。

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