HTML表单放错位置

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

这是之前的表单（请注意：它周围的红色方框不是表单的一部分，我只是用油漆将其放置，以帮助您快速查看问题）：

及之后：

有没有提示让标签与文本字段对齐？ 更新：

代码如下：

<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>

---

你能分享代码让我们看看发生了什么吗？我猜这与红色的额外边框有关。容器的宽度需要考虑到这一点，我会尝试将标签和输入放在同一个容器中，并使它们彼此相邻。@pateman我认为边界与此无关。它可能被添加到屏幕截图中。OP，请加上你的css:）@AlexG啊是的，我明白了。我仍然认为这与容器的宽度有关，但如果没有代码结构，您就无法判断。我不是100%赞成使用“em”，但当您添加错误消息时，“form元素”会扩展，因此使用“em”和“%”之间存在度量差异。“标准文本字段”大于“表单元素”所能容纳的大小。我将保持它的一致性，并为两者使用“%”宽度。

.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;
}