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

为什么我的CSS宽度不能在aspx页面中工作？

2 个答案: