html - 你如何左对齐一个div？

Question

我尝试使用以下方法左对齐 div:

<div class="col-md-3 float-left">

和

<div class="col-md-3" style="text-align: left;">

我尝试的都不起作用？

我现在尝试了 float 和 !important 但仍然无法正常工作，所以这里是我的更多代码:

<div class="form-horizontal">
        <h4>Branch</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group col-md-12">
            <div class="col-md-2">
                @Html.LabelFor(model => model.BranchName, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3">
                @Html.EditorFor(model => model.BranchName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BranchName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group col-md-12">
            <div class="col-md-2">
                @Html.LabelFor(model => model.Active, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-3" style="float: left !important;">
                @Html.EditorFor(model => model.Active)
                @Html.ValidationMessageFor(model => model.Active, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class=" col-md-offset-1 col-md-2">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

这里有一张图片可以说明我的意思。复选框和文本框距离标签太远，看起来很糟糕。

Answer 1

如果没有更多代码或更具体的问题描述，就无法告诉您太多信息。不管怎样，我的假设是您需要将 div 的内容左对齐？根据您使用的类名，我假设您使用的是 Bootstrap。在这种情况下，尝试将此类添加到您的 div 中:

text-left

如果还是不行，试试这个:

style="text-align: left !important;"

如果第二个有效，则您的 CSS 写在其他地方占主导地位，请尝试找到此 CSS 并删除/更改它。如果您对此感到困惑，请继续阅读 CSS Specificity .不要无缘无故地留下 !important；一般来说，这被认为是不好的做法。

引用: http://getbootstrap.com/css/#type-alignment