Question

我在将Flex-box应用于此CSS拨动开关扩展时遇到问题：https://ghinda.net/css-toggle-switch/index.html

我将其下载为CDN，所以我没有CSS文件

这是我的示例index.html代码：

<dependency>
    <groupId>org.jboss.resteasy</groupId>
    <artifactId>resteasy-spring</artifactId>
    <version>2.3.13.Final-redhat-1</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.jboss.resteasy</groupId>
    <artifactId>resteasy-jackson-provider</artifactId>
    <version>2.3.13.Final-redhat-1</version>
    <scope>provided</scope>
</dependency>

这是示例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>

显然，如果您使用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>

。

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

2 个答案: