wenform 界面风格样式修改
2009-07-31日在drupalchina.org由hosho提出关于wenform风格样式修改的问题，原文：有人用过webform吗?请问界面如何设置。
我经过测试，修改还算容易，效果：http://farm3.static.flickr.com/2540/3777612543_369c79a8fc_o.png
hosho要求的效果：http://drupalchina.org/files/001_1.jpg
为了测试我建立6个field
#webform-component-bname 姓名
#webform-component-bage 年龄
#webform-component-bgender 性别
#webform-component-bhobbies 爱好
#webform-component-beducation 学历
#webform-component-bblood 血型
-----------------------------
CSS代码：
#webform-component-bname,
#webform-component-bage,
#webform-component-bgender,
#webform-component-bhobbies,
#webform-component-beducation,
#webform-component-bblood{
width: 200px;
display: block;
float: left;
}
#webform-component-bgender,
#webform-component-bblood{
clear: right;
}
/**
* 由于性别是radio类型，需要让其横排，故作下面的调整
**/
#webform-component-bgender .form-item div.form-radios{
margin: 0px;
}
#webform-component-bgender .form-item div.form-radios .form-item label.option{
display: inline;
width: auto;
float: none;
}
#webform-component-bgender .form-item div.form-radios .form-item{
display: inline;
clear: right;
float: none;
}
#webform-component-bage,
#webform-component-bgender,
#webform-component-bhobbies,
#webform-component-beducation,
#webform-component-bblood{
width: 200px;
display: block;
float: left;
}
#webform-component-bgender,
#webform-component-bblood{
clear: right;
}
/**
* 由于性别是radio类型，需要让其横排，故作下面的调整
**/
#webform-component-bgender .form-item div.form-radios{
margin: 0px;
}
#webform-component-bgender .form-item div.form-radios .form-item label.option{
display: inline;
width: auto;
float: none;
}
#webform-component-bgender .form-item div.form-radios .form-item{
display: inline;
clear: right;
float: none;
}
Tag:
评论
发表新评论