スタイルシート - 並べて表示するフィールドを取得する方法

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

を？今、私はそれらをすべて1つの列の下に次々に得ます。

Answer 1

あなたはCSSでこの

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

のようなあなたの要素を整理するより多くの成功を持っているかもしれません：

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