javascript - 如何将 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 {
    display: flex;
    flex-direction: column;
}

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

显然，如果您使用 CDN 覆盖其样式表，则必须应用 !important 关键字。这就是我所做的，但我没有得到我想要的效果。

我试图将一个属性应用于 span 元素，也就是整个按钮，但它不起作用。

这是我想要实现的一个例子:

有什么建议吗？

Answer 1

您的 flexbox 确实有效，我想您可能会感到困惑，因为切换按钮的宽度设置为 100%。如果您减小宽度，我认为它看起来会更像您期望的那样，请参见下面的代码片段。

此外，您不必使用 !important 来覆盖通过 CDN 加载的资源的样式。只是因为它是在您的样式表之后加载的，所以它的样式会有更大的先例。有更好的方法可以在不使用 !important 的情况下覆盖样式，请参阅本文 What is the order of precedence for 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>

.