Как добавить отступ только между кнопками?

У меня есть asp:Panel который содержит динамически добавленные пользовательские адресные кнопки. То, что я пытаюсь сделать, это добавить CssClass для 2-й, 3-й и n-й кнопок, если их несколько. Я хочу, чтобы первая кнопка оставалась на месте, и любые последующие кнопки, чтобы получить класс CssClass, который просто добавляет небольшое количество отступов к левой стороне, но только если они не являются первой кнопкой.

Вот мой псевдокод для того, что я пытаюсь сделать:

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

Это часть Где, с которой у меня проблемы, я не знаю, как это написать. Как мне написать "Для каждой кнопки на этой панели, которая не первая, добавьте этот CssClass"?

Я не хочу просто массово добавлять отступ слева или справа от всех кнопок, потому что это может привести к сбою в месте, где находится первая, или путанице с маленьким разделителем и другими кнопками, и я пытаюсь избежать этого.

Я также использую Bootstrap, и я попытался установить их на панели:

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

так как space-between это именно то, что я ищу, но это не сработало (думаю, потому что это панель, а не div?) space-between работает только на div, а не на кнопках, idk. И да, я знаю, что панель отображается как div, но она все еще не работает, поэтому я пробую другие вещи.

После панели есть небольшой разделитель, за которым следует еще один набор (статических) кнопок:

мои адресные кнопки

Все, что я хочу, это небольшое расстояние между этими кнопками и только между ними.

У кого-нибудь есть предложения?

1 ответ

Решение

Вы могли бы использовать селекторы CSS для этого.

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

Йой всегда мог сделать простой margin-right если вы не против дополнительного места после 1234 North Street

Другие вопросы по тегам