Question

我使用User Control在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

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

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

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

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

2 个答案: