”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何在 CSS 中缩进后续换行标签行?

如何在 CSS 中缩进后续换行标签行?

发布于2024-11-08
浏览:161

How to Indent Subsequent Wrapped Label Lines in CSS?

缩进换行标签文本的后续行

当面临表单宽度的限制时,标签文本可以换行到多行,从而美观的担忧。虽然第一行由于输入元素的存在而缩进,但后续行可能不会缩进,从而产生不均匀的外观。

要仅使用 CSS 实现缩进的第二行和后续行,请考虑使用以下方法:

将输入元素及其标签包含在具有类 “checkbox-field” 的父容器中。将此父级的显示属性设置为 "flex" 并将 flex-direction 设置为 "row".

.checkbox-field {
  display: flex;
  flex-direction: row;
}

用法示例:

此解决方案灵活地将标签文本调整为可用宽度,同时保持一致的视觉外观。

版本声明 本文转载于:1729725831如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3