0

次のコードを使用して、MVC アプリケーションでラベルとチェックボックス/テキストボックスを表示しています。

<div style="width:auto; clear:both;">       
            <div class="metadata-left">Default Domain: </div>        
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.IsDefault) %></div>
            <br />

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

            <div class="metadata-left">Name:</div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.Name) %></div>
            <br />

            <div class="metadata-left">Domain Name:</div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.DomainName) %></div>
            <br />

            <div class="metadata-left">Forward Url:</div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.ForwardUrl)%></div>
            <br />

            <div class="metadata-left">Unsubscribe Url: </div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.UnSubscribeUrl)%></div>
            <br />

            <div class="metadata-left">Privacy Url:</div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.PrivacyUrl)%></div>
            <br />

            <div class="metadata-left">Brand Number:</div>
            <div class="metadata-right-domain"><%= Html.EditorFor(c => c.BrandNumber)%>
                <%= Html.HiddenFor(c=>c.Id) %></div>
            <br />
        </div>
        <div style="margin-left: 0; text-align: center; padding-top: 4%; clear: both;" class="saveArea">
            <a href='' class="save">Save</a> or <a href="/Admin/EmailBlast/Domains" class="cancel">
                Cancel</a>
            <img src="/Content/img/loader.gif" style="display: none;" class="loading" />
        </div>

しかし、私はアライメントを正しく取得していません。写真を参照してください: ここに画像の説明を入力

これは私が使用するスタイルシートです:

.metadata-left
{
    float: left;
    width: auto;
    text-align: right;
     display:block;
}
.metadata-right-domain
{
    float: right;
    width:auto; 
    padding-left: 3%;
    text-align: left;
}

どうすれば正しいアライメントを取得できますか?

編集: 3 つの DIV を並べて表示します (1 つを図に示します)。

4

2 に答える 2

1

DIV に幅を与える必要があります。自動では不十分なため、div ボックスはコンテンツと同じ幅しかありません。目的に合わせて % を使用できます。

于 2012-04-13T16:01:05.460 に答える
0

これはテーブルです。したがって、table要素を使用してこのデータをマークアップするだけです:

<style>
    .example TD {text-align: right; }
</style>

<table class="example">
    <tr>
        <th scope="row">Default Domain</th>
        <td>example.com</td>
    </tr>
    <tr>
        <th scope="row">Disabled</th>
        <td>No</td>
    </tr>
</table>

必要に応じて、複数のテーブルを並べて配置できます。たとえば、次のfloatプロパティを使用します。

<style>
    .example-tables TABLE {float: left; }
</style>

<div class="example-tables">
    <table>
        <!-- table 1 -->
    </table>

    <table>
        <!-- table 2 -->
    </table>

    <table>
        <!-- table 3 -->
    </table>
</div>
于 2012-04-13T16:05:15.507 に答える