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 框只能和内容一样宽。您可以将 % 用于您的目的。