Как применить flexbox к элементам тумблера CSS?

Question

У меня проблемы с применением flex-box к этому расширению тумблера CSS: https://ghinda.net/css-toggle-switch/index.html

Я загрузил его как CDN, поэтому у меня нет его CSS-файлов

Вот мой пример кода index.html:

<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

Вот пример кода CSS:

/ * SETTINGS * /

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: space-between !important;
}

Видимо, выПрименить CDN для переопределения их таблиц стилей.Это то, что я сделал, но я не получаю желаемого эффекта.

Я пытался применить свойство к элементу span, который является всей этой кнопкой, но он не работает.

Вот пример того, чего я хотел бы достичь:

Есть предложения?

Answer 1

Ваш flexbox действительно работает, я думаю, вы можете быть смущены, потому что ширина кнопки переключения установлена ​​на 100%. Если вы уменьшите ширину, я думаю, что это будет больше похоже на то, что вы ожидаете, см. Фрагмент ниже.

Кроме того, вам не обязательно использовать !important для переопределения стилей ресурса, загруженного через CDN. Просто потому, что он загружен после вашей таблицы стилей, у его стилей будет больший прецедент. Есть лучшие способы переопределения стилей без использования !important, см. Эту статью Каков порядок приоритета для CSS?

Надеюсь, это поможет!

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: start !important;
}
.switch-ios.switch-light > span {
    width: 100px !important;
}
.switch-ios.switch-light > strong {
    width: 250px !important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

.

Answer 2

Вам нужно поместить две кнопки, которые вы хотите отобразить, во flexbox с элементом контейнера. Примерно так:

<div class="container">
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
</div>

А затем примените flexbox к элементу контейнера:

.container {
  display: flex;
  justify-content: space-around;
}