En este momento tengo un botón de opción alineado con el texto del prefijo, pero cuando el texto de la etiqueta se alarga y pasa a la siguiente línea, por alguna razón el botón de opción se mueve hacia abajo y ya no está alineado con el texto del prefijo. Pero me gustaría que el botón de radio permanezca inmóvil ya sea que la etiqueta se envuelva o no. ¿Qué cambios debo hacer en 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>Puede simplificar su CSS, eliminar la position:relative; top: -8px , cambie align-items a 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> si lo que realmente desea es que la entrada se centre en el prefix text a pesar del tamaño de fuente, entonces puede hacer esto:
.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>Prueba esto
.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>