如何让单选按钮与整个字体大小更改的标签文本对齐？

Question

我面临css问题，默认字体大小单选按钮与标签文本完全对齐，但是一旦我放大或增加字体大小，单选按钮不再与文本对齐。 我想设置它的样式，以便单选按钮始终与文本对齐，而不管字体大小。 我需要对我的 css 进行什么调整才能实现这一点？ https://codepen.io/Judoboy/pen/OJQqPEW?editors=1100

 .label-container { display: inline-flex; justify-content: flex-start; align-items: start; } .label-text { display: flex; justify-items: center; align-items: center; height: 100%; } .prefix { font-weight: bold; font-size: 30px; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; }

 <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</div> </div> </label>

Answer 1

试试Grid解决方案，我们制作一个 2 x 2 网格，第一列用于单选按钮和空单元格，第二列用于标签。

网格解决方案

 .label-container { display: inline-grid; grid-template-columns: auto 1fr; grid-auto-rows: auto; grid-template-areas: 'input prefix-text' 'empty label-text'; } input { grid-area: input; align-self: center; margin: 0; } .label-text:first-of-type { grid-area: prefix-text; align-self: center; } .label-text:last-of-type { grid-area: label-text; } .prefix { font-weight: bold; font-size: 30px; } .text-spacing { padding-inline-start: 8px; padding-inline-end: 4px; }

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

弹性盒解决方案

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

 <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</div> </div> </label>