您如何左對齊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特異性 。 不要無緣無故地附加!important 。 通常，這被認為是不良做法。

參考： http : //getbootstrap.com/css/#type-alignment

Answer 2

您想分配一個div，而不是文本。 因此，您可以使用：

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

Answer 3

對於div的左對齊

<div style="float: left;"></div>

用於文本的左對齊

<p style="text-align:left;"></p>

Answer 4

嘗試

<div class="col-md-1">

代替

<div class="col-md-2">

在標簽Div上的間距應來自col-md-2的大小。 如果選擇col-md-1，則間隙應較小。