html - 如何仅在按钮之间添加填充？

Question

我有一个包含动态添加的用户地址按钮的 asp:Panel。我想要做的是将 CssClass 添加到第二个、第三个和第 n 个按钮如果有多个。我希望第一个按钮保持不变，任何后续按钮都可以获得 CssClass，它只是向左侧添加少量填充，但前提是它们不是第一个按钮。

这是我正在尝试做的伪代码:

if (user.address.Count > 1)
{
    foreach (UserAddress ua in user.addresses)
    {
        // Where the buttons are not the first button
        btnAddress.CssClass += " AddressButtonSpacing";
    }
}

这是我遇到问题的 Where 部分，我不确定如何编写它。如何编写“对于此面板中不是第一个按钮的每个按钮，添加此 CssClass”？

我不想只在所有按钮的左侧或右侧批量添加填充，因为这会弄乱第一个按钮所在的位置，或者弄乱小分隔线和其他按钮，我正在努力避免这种情况.

我也在使用 Bootstrap，我尝试在面板上设置这些:

display: flex;
justify-content: space-between;

因为 space-between 正是我要找的东西，但它没有用(我想是因为它是一个面板而不是一个 div？)或者 space- between 仅适用于 div 而不是按钮，idk。是的，我知道该面板呈现为 div，但它仍然无法正常工作，所以我正在尝试其他方法。

面板之后是一个小分隔线，后面是另一组(静态)按钮:

我想要的只是在这些按钮之间留出一点空间。

有人有什么建议吗？

Answer 1

你可以使用 CSS selectors为此。

<asp:Panel ID="Panel1" runat="server" CssClass="ButtonContainer">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Button ID="Button2" runat="server" Text="Button" />
    <asp:Button ID="Button3" runat="server" Text="Button" />
</asp:Panel>

<style>
    .ButtonContainer input:not(:first-child) {
        background-color: #ff0000;
        margin-left: 25px;
    }
</style>

如果你不介意 1234 North Street 之后的额外空间，Yoy 总是可以做一个简单的 margin-right