如何使用float:left对齐ASP.NET中Html.BeginForm内的div元素

嘿，我来帮你搞定这个表单布局的问题！你的现有代码里第一个左侧Div加了float:left和width:50%，但第二个Div没有设置浮动，所以它会跑到第一个Div的下方，没法实现并排对齐。下面是调整后的完整方案：

核心修改点 #

• 给第二个内容Div也添加float:left和合适的宽度（比如同样设为50%，确保两个Div占满一行）
• 给包裹这两个Div的父容器添加清除浮动的处理，避免父容器高度塌陷（因为浮动元素会脱离正常文档流，父容器默认不会包裹它们）

修改后的完整代码示例 #

@using (Html.BeginForm())
{
    <!-- 父容器添加clearfix类处理浮动 -->
    <div class="form-row clearfix">
        <div style="float:left; width:50%">
            @Html.LabelFor(m => m.Symbol)
            @Html.TextBoxFor(m => m.Symbol, new { @class = "form-control-inline" })
            @Html.ValidationMessageFor(m => m.Symbol)
        </div>
        <!-- 给第二个Div添加float:left和width:50% -->
        <div style="float:left; width:50%">
            @Html.LabelFor(m => m.Side)
            @Html.EnumDropDownListFor(m => m.Side, "Select", new { @class = "form-control-inline" })
            @Html.ValidationMessageFor(m => m.Side)
        </div>
    </div>

    <!-- 后续表单内容 -->
    <div>
        <!-- 其他表单元素 -->
    </div>
}

<!-- 可以在样式表中定义clearfix类，或者直接内联样式处理 -->
<style>
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

额外说明 #

1. 如果你的两个Div不需要各占50%，可以根据实际需求调整宽度（比如一个30%，一个70%），只要总宽度不超过100%（考虑到可能的内边距、边框，建议留一点余量，或者给元素加box-sizing:border-box，让内边距和边框算在宽度内）
2. 除了用伪元素的clearfix，你也可以给父容器加style="overflow:hidden;"来快速清除浮动，但伪元素的方式兼容性更好，也不会截断可能溢出的内容
3. 建议把内联样式移到外部样式表中，方便维护，比如：

.form-row .col-left, .form-row .col-right {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

然后对应的Div改成<div class="col-left">和<div class="col-right">，代码会更整洁。

内容的提问来源于stack exchange，提问作者gorrch