Question

这可能是一个转储问题，但我找不到一种方法来对齐视图中的第二个元素。尝试使用显示标签上的宽度，但它不会影响任何东西; display-fields在标签后立即开始。什么应该操纵标签的宽度？

更新

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

这是css

.display-label
{
margin: 0.5em 0;
font-weight:bold;
padding: 0.5em 0;
width: 10em;
float: left;
}

.display-field
{
margin: 0.5em 0;
padding: 0.5em 0;
}

Answer 1

将标签放在具有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>

然后：

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

和live demo。

或者，如果由于一些神秘的原因你无法将这些跨度更改为div，你也可以将它们显示为块（a.k.a divs）：

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

.display-field {
    display: block;
}

Answer 2

将您的保证金和填充应用于父div

MVC视图元素对齐问题

2 个答案: