首頁  >  文章  >  web前端  >  如何在不使用表格的情況下水平對齊div?

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

Barbara Streisand
Barbara Streisand原創
2024-11-21 00:11:14302瀏覽

How to Horizontally Align Divs Without Using Tables?

水平 Div 對齊

要在不使用表格的情況下水平對齊兩個 div,請將它們浮動在父容器中。以下是如何實現此目的的詳細資訊:

  1. 浮動Div:

    • 將以下CSS 屬性新增至div:

      float: left;
  2. 清除浮動:

    • 防止divdivo>防止divdiv所需的元素,請將下列屬性加入父元素:

      clear: none;
  3. 範例HTML 和CSS:

      範例HTML 和CSS:
    • <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>
      .aParent div {
        float: left;
        clear: none; 
      }
    • 以下是HTML 和CSS 的外觀範例:

此方法是無需使用表格即可對齊div 的乾淨且直接的方法。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn