將自定義單選按鈕和標籤對齊爲列

Question

我試圖將我的自定義單選按鈕作爲其自己的列旁邊的label元素，其中包含多個span s。使用默認單選按鈕很容易實現，但由於自定義樣式應用於label:before，因此它的行爲不同。

<div class="sp-package-show"> 
    <input type="radio" name="" value=""> 
    <label> 
    <span>Title</span> 
    <span>Date</span> 
    </label> 
</div> 

[type="radio"] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

label { 
    cursor: pointer; 
} 

[type="radio"] + label { 
    display: block; 
    margin-left: 1px; 
    vertical-align: middle; 
} 

[type="radio"] + label:before { 
    content: ''; 
    display: inline-block; 
    width: 1.1em; 
    height: 1.1em; 
    vertical-align: inherit; 
    border-radius: 1em; 
    // border: 0.15em solid $gray; 
    box-shadow: 0 0 0 1px gray; 
    margin-right: 0.75em; 
} 

[type="radio"]:checked + label:before { 
    box-shadow: 0 0 0 0.05em gray; 
    background-color: gray; 
} 

演示：https://codepen.io/ourcore/pen/mwRdbx

Answer 1

可以使labeldisplay: flex，然後換你的span S IN另一個元素，使label柔性孩子是:before元素和包裝你的span S中的元素。這將把他們放在相鄰的列。爲了使跨度在他們自己的路線上，使用display: block。

[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
[type="radio"] + label { 
 
    margin-left: 1px; 
 
    display: flex; 
 
} 
 

 
[type="radio"] + label:before { 
 
    content: ''; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    border-radius: 1em; 
 
    box-shadow: 0 0 0 1px gray; 
 
    margin-right: 0.75em; 
 
} 
 

 
[type="radio"]:checked + label:before { 
 
    box-shadow: 0 0 0 0.05em gray; 
 
    background-color: gray; 
 
} 
 

 
span { 
 
    display: block; 
 
}

<input type="radio" name="" value=""> 
 
<label> 
 
<div class="meta"> <span>Title</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    </div> 
 
</label>