なぜ私のCSSの幅がaspxページで機能していないのですか？

Question

私は

<div class = "buttonsHolder"> 
    <asp:Button runat = "server" ID = "btnAdd" Text = "Add New" CssClass = "buttonUserControl" /> 
    <div class = "horizontalSpace"></div> 
    <asp:Button runat = "server" ID = "btnEdit" Text = "Edit" CssClass = "buttonUserControl" /> 
    <div class = "horizontalSpace"></div> 
    <asp:Button runat = "server" ID = "btnDelete" Text = "Delete" CssClass = "buttonUserControl" /> 
</div> 

最初に私のコードを示しています私のCSSは

.buttonsHolder 
{ 
height:25px; 
width:465px; 
border: solid 1px; 
} 

.horizontalSpace 
{ 
width:20px; 
float:left; 
} 

.buttonUserControl 
{ 
width:105px; 
height:24px; 
} 

である。しかしhorizontalSpaceは関係なく、私は追加する

もう一つを与えているどのくらいの幅、作業していないされていません、私はHTML CSSがうまくいかない。  は、ボタンの間にスペースを入れるオプションですが、私のCSSには何が問題なのですか？ を使わないで修正するにはどうすればいいですか？

Answer 1

あなたのボタンの間に水平なスペースが必要な場合は、それらの間にdivを置くのではなく、マージンを置いてください。あなたの.buttonsクラスで

は

margin-right: 20px; 

Answer 2

あなたはそれがセットアップされている方法で、あなたの「水平スペーサー」の両方がすべての方法左から浮いされているを置きます。左に40px余分なスペースを追加する可能性が最も高いので、インラインボタンはまったく離れていません。

しかし、は、水平スペーシング要素を使用しないことをお勧めします。代わりに、各ボタンの左側または左側に余白を追加し、CSS2をサポートするかどうかに応じて、最初または最後の要素の余白を削除します。

CSS：

.buttons .buttonUserControl 
{ 
margin-right: 20px; 
} 

HTML：あなたは余分な右マージンを持つ最後の要素を気にしない場合は

<div class = "buttons"> 
<asp:Button runat = "server" ID = "btnAdd" Text = "Add New" CssClass = "buttonUserControl" /> 
<asp:Button runat = "server" ID = "btnEdit" Text = "Edit" CssClass = "buttonUserControl" /> 
<asp:Button runat = "server" ID = "btnDelete" Text = "Delete" CssClass = "buttonUserControl" /> 
</div> 

、これは正常に動作します。 1）CSS2をサポートするには、最後の要素に手動スタイルを追加してmargin: 0を設定するか、2）CSS3を使用するには.buttons .buttonUserControl:last-of-type { margin: 0 }を追加する必要があります。