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

【问题标题】：Style list of divs as 2 column layout with cssdiv的样式列表作为带有css的2列布局
【发布时间】：2010-06-16 16:41:26
【问题描述】：

我正在通过“NerdDinner”教程试用 ASP.NET MVC 2。但显然 MVC 的第 2 版并没有创建与教程中相同的详细信息页面，并且您可以获得带有 css 类的 div 来设置样式。但是，我想获得每个标签与字段在同一行上跟随的样式，但我做不到，我将它们放在彼此之上，或者如果我尝试使用浮点数，就会发生奇怪的事情（可能是因为我不知道在这种情况下如何使用它，其他所有 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>

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

【问题讨论】：

标签： css asp.net-mvc

【解决方案1】：

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

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

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

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

【讨论】：

来自here 我只是以这种方式将详细视图内容居中：<div id="inner"> <fieldset> <div class="display-label"></div> <div class="display-field"></div> </fieldset> </div> 并使用了上面的css，谢谢，希望对某人有所帮助。

【解决方案2】：

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

.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"/> 以重置对齐方式。

【讨论】：

谢谢，这行得通。但是再一次，请参阅 Salil 的评论，关于我希望能够仅通过 css 来做到这一点......如果不可能，我将不得不接受这一点，在我看来应该有办法......跨度>
您也许可以只使用.display-label { clear:both; float:left }。我总是有一个包装 div，所以我从来没有尝试过。
太好了，成功了！谢谢，这就是我正在寻找的答案。现在只有一个问题：如果我在它们周围放置边框以模拟表格，则显示字段正好在边框上，并且填充似乎没有帮助，因为它似乎是指“的最左边边缘”表”（显示标签在哪里）...知道如何解决这个问题吗？
显示标签可以正常工作，但显示字段没有任何反应...我为显示标签设置了 200px 的宽度。

【解决方案3】：

试试

.display-label{
  float:left;

}
.display-field{
  float:left;
}

和

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

【讨论】：

谢谢，但效果不如预期。这些行都在上一行结束后开始（水平）另外，我希望有一种方法可以在不更改 html 的情况下设置默认生成的详细信息视图的样式，只需使用 css ...