如何将 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 显示的两个按钮与容器元素放在一起。像这样的东西：

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

Answer 2

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

.

Answer 3

我现在正在处理同一个项目，并且处理同一个问题已经一天多了。我的解决方法是 link 我的 HTML 文档头部的切换开关样式表在我的 styles.css link 之后.所以切换样式表在那里占据主导地位。

如何将 flexbox 应用于 CSS 切换开关元素？

How to apply flexbox to CSS toggle-switch elements?

javascript

css

toggle

togglebutton

flexbox