HTML表格放错了地方

Question

我有一个带有一些验证的简单HTML表单，但是当表单出现时，文本标签会被放错位置。

这是之前的表格（请注意：它周围的红色方块不是表格的一部分，我只是将它与Paint放在一起，以帮助您快速查看问题）：

之后：

是否有任何提示要保持标签与文字字段对齐？ 的更新：

这是代码：

<form name="senstageaddform">

    <div class="form-element">
        <label for="ed_senStartDate" class="text-label">
            {{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
        </label>
        <input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
    </div>

    <div class="form-element">
        <label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
        <input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
    </div>

</form>

这是CSS：

.form-element {
    display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top

.text-label {
    width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px; 
}

.standard-text-field {
    width: 10em;
}