asp.net - 样式表对齐问题

Question

我正在使用以下代码在我的 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;
}

如何获得正确的对齐方式？

编辑：我并排显示三个 DIV（如图所示）。

Answer 1

你需要给你的 DIV 一个宽度。Auto 是不够的，所以 div 框只和内容一样宽。您可以将 % 用于您的目的。

Answer 2

这是个桌子。所以只需使用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>