缩进换行标签文本的后续行
当面临表单宽度的限制时,标签文本可以换行到多行,从而美观的担忧。虽然第一行由于输入元素的存在而缩进,但后续行可能不会缩进,从而产生不均匀的外观。
要仅使用 CSS 实现缩进的第二行和后续行,请考虑使用以下方法:
将输入元素及其标签包含在具有类 “checkbox-field” 的父容器中。将此父级的显示属性设置为 "flex" 并将 flex-direction 设置为 "row".
.checkbox-field {
display: flex;
flex-direction: row;
}
用法示例:
此解决方案灵活地将标签文本调整为可用宽度,同时保持一致的视觉外观。
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3