樣式表對齊問題

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

但我沒有得到對齊的權利。見圖片： enter image description here

這是我使用的樣式表：

.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（顯示在圖片中的一個）。

來源

2012-04-13 GoldenUser

這與ASP.NET MVC無關。請出示您的最終標記並重新提出您的問題。另外我不明白你爲什麼使用'jquery'標籤。 – 2012-04-13 16:00:07

你需要給你的DIV一個寬度。自動是不夠的，所以div盒只與內容一樣寬。您可以將％用於您的目的。

來源

2012-04-13 16:01:05 WolvDev

這是一張桌子。因此，只要使用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-13 16:05:15

我不會工作因爲我並排顯示三個這樣的表。 – GoldenUser 2012-04-13 16:07:58

如果需要，您可以並排放置桌子。 – 2012-04-13 16:09:00

樣式表對齊問題

回答

相關問題