如何在不使用表格的情况下水平对齐 HTML 中的 div？-css教程-PHP中文网

如何在不使用表格的情况下水平对齐 HTML 中的 div？

Barbara Streisand

发布： 2024-11-30 04:23:14

原创

618 人浏览过

How Can I Horizontally Align Divs in HTML Without Using Tables?

没有表格的水平 Div 对齐

在 HTML 中，有多种对齐元素的方法。虽然使用表格对齐 div 很简单，但有些人更喜欢非表格方法。以下是如何在不依赖表格的情况下实现 div 水平对齐：

使用 CSS Float 和 Clear

创建父 div： 将您想要的两个 div 包裹起来在父 div 中对齐。
浮动 div： 添加浮动：左；子 div 的属性。这将使它们浮动到其父级的左侧。
清除浮动：要防止子 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中文网其他相关文章！