如何將標籤對齊到樣式複選框的右側

我正努力將標籤與我的樣式複選框對齊。我正在使用this spiffy CSS toggle switch as a styled checkbox。我有以下HTML：如何將標籤對齊到樣式複選框的右側

<label> 
    <input id="test" class="cmn-toggle cmn-toggle-round" type="checkbox" /> 
    <label for="test"></label> 
    testlabel 
</label>

伴隨着的是，我有以下的CSS：

input.cmn-toggle-round + label { 
    padding: 2px; 
    width: 60px; 
    height: 30px; 
    background-color: #dddddd; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
} 
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { 
    display: block; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    bottom: 1px; 
    content: ""; 
} 
input.cmn-toggle-round + label:before { 
    right: 1px; 
    background-color: #f1f1f1; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-transition: background 0.4s; 
    -moz-transition: background 0.4s; 
    -o-transition: background 0.4s; 
    transition: background 0.4s; 
} 
input.cmn-toggle-round + label:after { 
    width: 29px; 
    background-color: #fff; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -webkit-transition: margin 0.4s; 
    -moz-transition: margin 0.4s; 
    -o-transition: margin 0.4s; 
    transition: margin 0.4s; 
} 
input.cmn-toggle-round:checked + label:before { 
    background-color: #8ce196; 
} 
input.cmn-toggle-round:checked + label:after { 
    margin-left: 30px; 
}

結果具有從標籤直接放置複選框下方，而不是右邊的文本它。下面以截圖爲例： this is the output

我的問題很簡單。這是爲什麼發生？我怎樣才能將標籤排列在複選框的右側？

來源

2014-10-17 Jim

您的文字標籤被壓入切換鍵下方，因爲它被設置爲顯示：block。您可以： 1.將其更改爲顯示：inline-block，這會將右側的內嵌文本放在旁邊。 2.保留display：block，但將float：left添加到您的切換，以便文本出現在它旁邊。

根據需要，您只需在文本中添加邊距/填充;你可能想要將它包裝在一個或其他元素中，以便更容易地設計它。

來源

2014-10-17 01:56:59 ala8727

添加浮動：當我在一行中有多個切換時，留給我的切換提供了一些有趣的行爲。 [這裏是一個例子]（http://imgur.com/Yzr6Xb2） – Jim 2014-10-17 02:05:08

是的，可能會發生。如果你發佈了實際的代碼，但只是看它，我認爲如果每個標籤對（切換和文本）都包裝在它們自己的塊級元素（如div）中，這應該會有所幫助，。如果您希望切換標籤全部水平排列，那麼您需要將每對的包裝元素設置爲'float：left'。 – ala8727 2014-10-17 02:07:27

對。包裝每個單獨的幫助。好奇爲什麼這有所作爲，但很高興有一個解決方案。這一直困擾我幾個小時:)謝謝 – Jim 2014-10-17 02:09:43

如何將標籤對齊到樣式複選框的右側

回答

相關問題