使用purecss.io框架设置单选按钮组的样式

时间:2013-10-16 07:42:23

标签: forms yui-pure-css

前几天我偶然发现了Pure项目--YUI团队发布的一组CSS模块。我想在我的网站上标准化表单,我喜欢他们的表单模块的外观。特别是他们称之为“对齐形式”的形式。我将CSS添加到我的网站并将所需的样式添加到我的表单中,除了我的单选按钮组外,它们都运行良好。在“对齐的表单”中,每个输入的左侧都有一个标签,而标签的右侧则是输入。但是单独的单选按钮有单独的标签 - 它们在按钮的右侧设置了样式。我正在寻找的是一种为按钮组添加整体标签的方法,这些按钮的样式设置在左侧并居中。

我确实找到了解决方法,但我正在寻找一种专门的“纯粹”方式。

我的解决方法是将无线电包含在字段集中,并使用字段集的图例作为无线电组的标签。

我很高兴听到其他使用Pure Aligned Forms的人看到你是如何处理这个问题的。

1 个答案:

答案 0 :(得分:0)

我认为你的问题有点模糊。如果你想要实现的是这样的话,

Label
  radio
  radio
  radio

那么你做它的方式(你称之为“解决方法”)实际上是最好的方法。字段集用于将项目分组在一起,您可以使用图例作为标签。

但是,如果您尝试做这样的事情,

       radio
Label  radio
       radio

然后你将要使用浮动div(一个用于存放标签,另一个用于分组你的单选按钮)。

如果不知道你的代码是什么样的,以及你的目标是什么,我真的无法更具体......