スタイルシートのアラインメントの問題

Question

私はMVCアプリケーションでlablesとcheckboxes/textboxesを表示するために次のコードを使用しています。

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

どのように私は右のアライメントを得ることができますか？

EDIT：3つのDIVを並べて表示します（画像に1つ表示）。

Answer 1

DIVの幅を指定する必要があります。自動では不十分なので、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>