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視圖元素對齊問題

回答

相關問題