div的样式列表为带有css的2列布局

Question

我正在通过"NerdDinner"教程尝试ASP.NET MVC 2.但显然MVC的第2版并没有像教程中那样创建一个Details页面,并且你可以在它们上面使用带有css类的div来设置样式.但是,我想得到每个标签跟在字段的同一行上的样式,我不能这样做,我把它们放在彼此的顶部,或者如果我尝试使用浮动奇怪的事情发生(可能是因为在这种情况下,我不确切知道如何使用它,其中每个其他div应该在同一行上).这是为Details页面生成的html:

<fieldset>
        <legend>Fields</legend>
        <div>
        <div class="display-label">DinnerID</div>
        <div class="display-field"><%: Model.DinnerID %></div>

        <div class="display-label">Title</div>
        <div class="display-field"><%: Model.Title %></div>

        <div class="display-label">EventDate</div>
        <div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div>

        <div class="display-label">Description</div>
        <div class="display-field"><%: Model.Description %></div>

        <div class="display-label">HostedBy</div>
        <div class="display-field"><%: Model.HostedBy %></div>

        <div class="display-label">ContactPhone</div>
        <div class="display-field"><%: Model.ContactPhone %></div>

        <div class="display-label">Address</div>
        <div class="display-field"><%: Model.Address %></div>

        <div class="display-label">Country</div>
        <div class="display-field"><%: Model.Country %></div>

        <div class="display-label">Latitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div>

        <div class="display-label">Longitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div>

        <div class="display-label">IsValid</div>
        <div class="display-field"><%: Model.IsValid %></div>
        </div>
    </fieldset>

如何让每个"条目"的显示标签和显示字段显示在同一行？

Answer 1

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

.display-field{
  float:left;
  clear:right;
}

这对我开箱即用,没有改变HTML标记,但是YMMV ......

根据Anders的建议指定标签字段的宽度有助于它们排队.

Answer 2

与 @Salil 的答案相同，但<br/>您可以在每个“行”周围使用另一个 div 并手动设置边距，而不是使用 a 。它只是给你更多的控制权。

.itemrow
{
    margin-bottom: 10px;
}

<div class="itemrow">
    <div class="display-label">DinnerID</div>
    <div class="display-field"><%: Model.DinnerID %></div>
</div>
<div class="itemrow">
    <div class="display-label">Title</div>
    <div class="display-field"><%: Model.Title %></div>
</div>

另外，不要忘记<div style="clear:both"/>末尾的 a 来重置对齐方式。