MVC视图元素对齐问题

这可能是一个转储问题，但我无法找到一种方法来对齐视图上的第二个元素。在显示标签上尝试使用宽度，但不影响任何内容;显示字段在标签后立即开始。应该如何操纵标签的宽度？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>

这里是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; 
}

来源

2011-09-05 Tsarl

把标签中的div float: left规则和固定的宽度。也把值放在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的你也可以显示它们为块（又名的div）：

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

.display-field { 
    display: block; 
}

来源

2011-09-05 20:20:02

我加你的推荐，但现在它真的搞砸了。提起现在看起来比标签更高！用我正在使用的CSS更新了问题。 – Tsarl

它工作正常，如果我删除边距和填充...为什么发生这种情况？ – Tsarl

@Tsarl，这是因为你有边距和填充:-) –

应用您的margin和padding父DIV

来源

2011-09-05 21:14:36

MVC视图元素对齐问题

回答

相关问题