Html MVC视图元素对齐问题

这可能是一个转储问题，但我找不到对齐视图上第二个元素的方法。尝试在显示标签上使用宽度，但不影响任何内容；显示字段在标签之后立即开始。应该如何操作标签的宽度

更新

<div>
    <div class="display-label">Name:</div >
    <div class="display-field"><%: Model.personalInfo.FirstName + " " + Model.personalInfo.LastName%></div >
</div>
<div>
    <div class="display-label">Date of Birth:</div >
    <div class="display-field"><%: Model.personalInfo.DOB.ToShortDateString() %></div >
</div>

---

使用

float:left

规则和固定宽度将标签放在div中。同时将值放在div中

<div>
    <div class="display-label">Name:</div>
    <div><%: Model.personalInfo.FirstName + " " + Model.personalInfo.LastName%></div>
</div>
<div>
    <div class="display-label">Date of Birth:</div>
    <div><%: Model.personalInfo.DOB.ToShortDateString() %></div>
</div>

还有一个

或者，如果出于某种神秘原因，无法将这些跨度更改为div，也可以将其显示为块（也称为div）：

---

将您的边距和填充应用于父div

我添加了您的推荐，但现在它真的搞砸了。文件现在看起来比标签高！用我正在使用的css更新了这个问题。如果我删除了边距和填充，效果会很好。。。为什么会发生这种情况？@Tsarl，之所以会发生，是因为你有边距和边距：-）我怀疑：P所以我不应该用边距和边距来避免这些奇怪的问题？

<div>
    <div class="display-label">Name:</div>
    <div><%: Model.personalInfo.FirstName + " " + Model.personalInfo.LastName%></div>
</div>
<div>
    <div class="display-label">Date of Birth:</div>
    <div><%: Model.personalInfo.DOB.ToShortDateString() %></div>
</div>

.display-label {
    float: left;
    width: 200px;
}

.display-label {
    display: block;
    float: left;
    width: 200px;
}

.display-field {
    display: block;
}