[英]How to get radio button to stay aligned when label text wraps to next line?
Right now I have radio button aligned at the prefix text, but when label text becomes long and wrap to next line, for some reason the radio button to move downward and no longer aligned to prefix text.现在我的单选按钮与前缀文本对齐,但是当标签文本变长并换行到下一行时,由于某种原因,单选按钮向下移动并且不再与前缀文本对齐。 But I would like radio button to stay still whether label gets wrapped or not.但是无论标签是否被包裹,我都希望单选按钮保持静止。 What changes do I need to make in css?我需要在 css 中进行哪些更改? https://codepen.io/Judoboy/pen/dydLPJE 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>
You can simplify your CSS, remove the position:relative; top: -8px
您可以简化 CSS,删除position:relative; top: -8px
position:relative; top: -8px
, change align-items
to flex-start
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>
if what you really want is having the input to be centered to prefix text
despite the font-size, then you can do this:如果您真正想要的是将输入集中到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>
Try this尝试这个
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.