樣式表 - 如何讓字段並排顯示

Question

我使用用戶控件在ASP.NET MVC應用程序中顯示一堆字段。 例如。

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

在樣式表中，我有以下類別：

.metadata-left 
{ 
    float: left; 
    width: auto; 
    text-align: right; 
} 
.metadata-right 
{ 
    float: left; 
    width: 68%; 
    padding-left: 3%; 
    text-align: left; 
} 
.metadata div 
{ 
    height: 20px; 
} 

我如何獲得這些字段並排顯示的一面呢？現在我一個接一個地把它們全部放在一列之下。

Answer 1

你可能有更多的成功舉辦元素這樣

<div class="metadata-field"> 
    <div class="metadata-left metadata"> 
     Default Domain: 
    </div> 
    <div class="metadata-right metadata"> 
     <%= Html.EditorFor(c => c.IsDefault) %> 
    </div> 
</div> 
<div class="metadata-field"> 
    <div class="metadata-left metadata"> 
     Disabled: 
    </div> 
    <div class="metadata-right metadata"> 
     <%= Html.EditorFor(c => c.IsDisabled) %> 
    </div> 
</div> 

使用CSS：

.metadata-field { 
    clear:both; 
} 
.metadata-left 
{ 
    float: left; 
    width: auto; 
    text-align: right; 
} 
.metadata-right 
{ 
    float: left; 
    width: 68%; 
    padding-left: 3%; 
    text-align: left; 
} 
.metadata div 
{ 
    height: 20px; 
}​ 

你可以讓你的調整，以進一步轉變佈局。

參見：http://jsfiddle.net/LbTg9/

Answer 2

這很可能是.metadata-left的寬度。一個明確的寬度增加，像：

.metadata-left 
{ 
    float: left; 
    width: 29%; 
    text-align: right; 
} 
.metadata-right 
{ 
    float: left; 
    width: 68%; 
    padding-left: 3%; 
    text-align: left; 
}