使用css将div样式列表设置为2列布局

我正在通过“NerdDinner”教程试用ASP.NETMVC2。但是MVC的第2版显然没有创建与本教程中相同的详细信息页面，您可以使用带有css类的div来创建样式。但是，我想得到这样的样式，即每个标签都跟在字段的同一行上，但我做不到，我让它们彼此重叠，或者如果我尝试使用float，就会发生奇怪的事情（可能是因为我不知道在这种情况下如何使用它，其他每个div都应该在同一行上）。以下是为详细信息页面生成的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>

领域
晚餐
标题
事件日期
描述
招待所
联络电话
地址
国家
纬度
经度
有效

如何使每个“条目”的显示标签和显示字段显示在同一行上？

试试看

.display-label{
  float:left;

}
.display-field{
  float:left;
}

及

DinnerID


标题

与@Salil的答案相同，但您可以在每一行周围使用另一个div并手动设置边距，而不是使用

。它只是给你多一点控制力

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

.itemrow
{
边缘底部：10px；
}
晚餐
标题

另外，不要忘了在最后有一个

来重置对齐

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

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

这对我来说是开箱即用的，HTML标记没有变化，但是YMMV

---

按照Anders的建议指定标签字段的宽度有助于他们对齐。

谢谢，但效果并不如预期。这些行都是在前一行结束后开始的（水平），我希望有一种方法可以在不更改html的情况下设置默认生成的详细信息视图的样式，只使用css…谢谢，这很有效。但是再一次，请看Salil的评论，关于我希望能够完全通过css来实现这一点。。。如果这是不可能的，我不得不接受，我只是觉得应该有一种方法…你可以只使用

.display label{clear:both；float:left}

。我总是有一个包装袋，所以我从来没有尝试过这个。太好了，它起作用了！谢谢，这就是我想要的答案。现在只有一个问题：如果我在它们周围放置边框来模拟一个表，那么显示字段就在边框的正上方，而填充似乎没有帮助，因为它似乎引用了“表”（显示标签所在的位置）的最左边的边。。。你知道怎么解决这个问题吗？它可以和显示标签一起工作，但显示字段没有任何变化。。。我已经为display-label设置了200px的宽度。我刚刚以这种方式将详细信息视图内容居中：

，并使用了上面的css，谢谢，希望能对其他人有所帮助。

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

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