html - 如何使 margin-left 在同一个 div 中正常工作？

Question

在我的元素中，我希望数据显示为左对齐。所以我选择了三个 div(divSecFir,divSecSec,divSecThi) 来格式化出现在我的网站上。

这里是正确的显示:

RequesetWay:            Proposer:             RequestTime:
one                     John                  2017-09-08 16:04:31

但不幸的是，它是这样工作的:

 RequesetWay:            Proposer:             RequestTime:
              one                     John     2017-09-08 16:04:31

这是我的代码:

var reqStWay = "one";
var stProposer = "John";
var reqStTime = "2017-09-08 16:04:31";
$('#reqStWay').html(reqStWay);
$('#stProposer').html(stProposer);
$('#reqStTime').html(reqStTime);

.divSec {
    width: 100%;
    height: 15%
}

.divSec div {
    float: left;
    width: 33%
}

.divSec label {
    float: left;
    margin-left: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divSec">
    <div class="divSecFir">
        <label>RequesetWay:</label><br/>
        <label id="reqStWay"></label>
    </div>
    <div class="divSecSec">
        <label>Proposer:</label><br/>
        <label id="stProposer"></label>
    </div>
    <div class="divSecThi">
        <label>RequestTime:</label><br/>
        <label id="reqStTime"></label>
    </div>
</div>

我不知道，谁能帮帮我？

Answer 1

您可以添加display: inline-grid;到.divSec div来对齐内容。

.divSec div {
    float: left;
    width: 33%;
    display: inline-grid;
}

$(function () {
    var reqStWay = "one";
    var stProposer = "John";
    var reqStTime = "2017-09-08 16:04:31";
    $('#reqStWay').html(reqStWay);
    $('#stProposer').html(stProposer);
    $('#reqStTime').html(reqStTime);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
    .divSec {
        width: 100%;
        height: 15%
    }

    .divSec div {
        float: left;
        width: 33%;
        display: inline-grid;
    }

    .divSec label {
        float: left;
        margin-left: 10px
    }
</style>

<div class="divSec">
    <div class="divSecFir">
        <label>RequesetWay:</label><br />
        <label id="reqStWay"></label>
    </div>
    <div class="divSecSec">
        <label>Proposer:</label><br />
        <label id="stProposer"></label>
    </div>
    <div class="divSecThi">
        <label>RequestTime:</label><br />
        <label id="reqStTime"></label>
    </div>
</div>