样式表 - 如何让字段并排显示答案

【问题标题】：Stylesheet - how to get the fields to display side by side样式表 - 如何让字段并排显示
【发布时间】：2012-04-23 23:43:32
【问题描述】：

我使用用户控件在 ASP.NET MVC 应用程序中显示一堆字段。例如。

    <div class="metadata-left metadata">
        <div>
            Default Domain:</div>
        <br />
        <div>
            Disabled:</div>
        <br/>
        </div>
    <div class="metadata-right metadata">
        <div>
            <%= Html.EditorFor(c => c.IsDefault) %></div>
        <br />
        <div>
            <%= Html.EditorFor(c => c.IsDisabled) %></div>
        <br />
        </div>

在样式表中，我有以下类：

.metadata-left
{
    float: left;
    width: auto;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}
.metadata div
{
    height: 20px;
}

如何让这些字段并排显示？现在我把它们一个接一个地放在一列下。

【问题讨论】：

标签： asp.net css asp.net-mvc stylesheet

【解决方案1】：

很可能是.metadata-left 的宽度。为它添加一个明确的宽度：

.metadata-left
{
    float: left;
    width: 29%;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}

【讨论】：

【解决方案2】：

这样组织你的元素可能会更成功

<div class="metadata-field">
  <div class="metadata-left metadata">
        Default Domain:
  </div>
  <div class="metadata-right metadata">
        <%= Html.EditorFor(c => c.IsDefault) %>
  </div>
</div>
<div class="metadata-field">
  <div class="metadata-left metadata">
        Disabled:
  </div>
  <div class="metadata-right metadata">
        <%= Html.EditorFor(c => c.IsDisabled) %>
  </div>
</div>

使用 CSS：

.metadata-field {
    clear:both;
}
.metadata-left
{
    float: left;
    width: auto;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}
.metadata div
{
    height: 20px;
}

您可以进行调整以进一步更改布局。

见：http://jsfiddle.net/LbTg9/

【讨论】：