asp.net - 样式表 - 如何让字段并排显示

Question

我使用用户控件在 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;
}

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

Answer 1

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

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

Answer 2

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

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