0

ユーザーコントロールを使用して、ASP.NETMVCアプリケーションの一連のフィールドを表示します。例えば。

    <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;
}

これらのフィールドを並べて表示するにはどうすればよいですか？今、私はそれらすべてを次々に1つの列の下に表示します。

4

2 に答える 2

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/

于 2012-04-11T16:22:04.617 に答える
1

ほとんどの場合、の幅です.metadata-left。次のように明示的な幅を追加します。

.metadata-left
{
    float: left;
    width: 29%;
    text-align: right;
}
.metadata-right
{
    float: left;
    width: 68%;
    padding-left: 3%;
    text-align: left;
}
于 2012-04-11T16:17:35.670 に答える