Проблема выравнивания элементов вида MVC

Question

Возможно, это вопрос дампа, но я не могу найти способ выровнять вторые элементы в представлении.Пробовал использовать ширину на метках дисплея, но это ни на что не влияет;поля отображения начинаются сразу после меток.Чем следует манипулировать шириной надписей?

Обновление

<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

Примените ваши поля и отступы к родительскому div

Answer 2

Поместите метки в div с правилом float: left и фиксированной шириной.Также поместите значения в divs.

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