当标签文本换行到下一行时，如何让单选按钮保持对齐？

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 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>