在下面的代码片段中,我有工具名称和同一行的一个单选按钮,但尽管我给出了space-between
,但单选按钮并不在最后.
如何将单选按钮与右侧末端对齐,就像space-between
正常工作一样
.container-section-column-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
input[type='radio'] {
display: none;
}
label {
cursor: pointer;
position: relative;
font-size: 4rem;
}
label::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: transparent;
border: 2px solid grey;
border-radius: 50%;
top: 50%;
left: -5rem;
transform: translateY(-50%);
transition: border-color 400ms ease;
}
label::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border: 2px solid red;
border-radius: 50%;
top: 50%;
left: -5rem;
transform: translateY(-50%) scale(0);
transition: transform 400ms ease;
}
input[type='radio']:checked+label::before {
border-color: red;
}
input[type='radio']:checked+label::after {
transform: translateY(-50%) scale(0.55);
}
<div class='container-section'>
<div class='container-section-column-wrapper'>
<div class='column-one'>
<div class='tool-name'>Tool one</div>
</div>
<div class='column-two'>
<input type='radio' id='tool-one' name='tool-pick-group' />
<label for='tool-one' />
</div>
</div>