将自定义单选按钮和标签对齐为列

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>