【问题标题】:Label Next to Input Field输入字段旁边的标签
【发布时间】:2022-12-26 06:42:58
【问题描述】:

我的同事想出了这个主意。 Webflow 默认在输入字段顶部制作带有标签的表单。没有简单的选项可以选择将标签放在同一行的输入字段旁边。我的同事所做的是对输入字段的框模型顶部使用负边距,并添加填充,输入字段的左边距。这会将输入字段与标签对齐在同一行并紧挨着它。

【问题讨论】:

    标签: forms webflow


    【解决方案1】:

    一种稍微清洁的方法是;

    • 为标签分配一个类别,例如Label
    • 给你的标签一个固定的宽度
    • 将标签和字段包装在 DIV 中,为其分配一个类,例如Field Frame
    • 将该 DIV 的布局设置为 flex horizo​​ntal。

    这使您对标签字段布局有更多的可预测性,这在您设计更窄的断点时变得很重要。

    很有可能在移动纵向断点处,您希望标签出现在输入字段上方,而 flex 允许您在您选择的任何断点处轻松地将样式更改为垂直。

    当然,另一种选择是完全放弃标签,而是使用占位符设置。

    【讨论】: