如何获得单选按钮保持对齐时，标签文本包装到下一行?

Question

现在我有单选按钮对齐在前缀文本，但是当标签文本变长并换行到下一行时，由于某种原因，单选按钮向下移动，不再与前缀文本对齐。但我希望单选按钮保持不变，无论标签是否被包装。我需要在css中做什么改变?https://codepen.io/Judoboy/pen/dydLPJE

.label-container {
display: inline-flex;
align-items: center;
}
.label-wrapper {
width: 200px;
}
input {
margin: 0;
position: relative;
top: -8px;
}
.label-text {
box-sizing: border-box;
line-height: 1;
}
.prefix {
font-weight: bold;
font-size: 14px;
}
.text-spacing {
padding-inline-start: 8px;
padding-inline-end: 4px;
}

<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
</label>
</div>

Answer 1

你可以简化你的CSS，去掉position:relative; top: -8px，把align-items改成flex-start

.label-wrapper {
width: 200px
}
.label-container {
display: flex;
align-items: flex-start;
}
.prefix {
font-weight: bold;
font-size: 14px;
}
.text-spacing {
padding-inline: 8px 4px;
}

<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
</label>
</div>

如果您真正想要的是将输入居中到prefix text，尽管字体大小，那么您可以这样做:

.label-wrapper {
display: flex;
flex-wrap: wrap;
width: 200px;
}
.label-container {
display: flex;
align-items: center
}
.prefix {
font-weight: bold;
font-size: 14px;
}
.large {
font-size: 20px
}
.text-spacing {
padding-inline: 8px 4px;
}
.label-text:not(.prefix) {
padding-left: 30px
}

<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix">Prefix Text</div>
</label>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>

<hr />
<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div class="label-text text-spacing prefix large">Prefix Text</div>
</label>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>

Answer 2

试试这个

.label-container {
display: inline-flex;
align-items: flex-start;
}
.label-wrapper {
width: 200px;
}
input {
margin: 0;
}
.label-text {
box-sizing: border-box;
line-height: 1;
}
.prefix {
font-weight: bold;
font-size: 14px;
}
.text-spacing {
padding-inline-start: 8px;
padding-inline-end: 4px;
}

<div class='label-wrapper'>
<label class="label-container">
<input type="radio" />
<div>
<div class="label-text text-spacing prefix">Prefix Text</div>
<div class="label-text text-spacing">This is label. This is label. This is label. This is label.</div>
</div>
</label>
</div>