如何將 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來覆蓋樣式，請參見本文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

我現在正在做同一個項目，並且處理同樣的問題已經超過一天了哈哈！ 我的解決方法是我的 html 文檔頭部中的切換開關樣式表的鏈接出現在我的 styles.css 鏈接之后。 所以切換樣式表在那里占據主導地位。 希望這有助於下一個人哈哈