Question

我有一个表单，其中联系表单有标签和字段，但它们都在换行符上。我想用JS来制作标签及其各自的字段在同一行，用于Optimizely的A / B测试。

假设无法访问标记（仅限JS）。

我的表单中有一个JSFiddle：http://jsfiddle.net/2thjbt9m/1/

我已经尝试将字段设置为inline-block，但似乎并没有这样做。

Answer 1

是的，您可以通过定位输入类并将输入设置为inline-block来使用JS执行此操作：

$(".input-lg").css({"display": "inline-block", "width":"60%"});

FIDDLE

Answer 2

您可以使用自定义CSS覆盖样式，但这可能不是＆＃34;引导方式＆＃34;这样做。

input字段为inline-block是必需的，但还不够，因为它们a）宽度为100％，b）.form-group宽度仅为50％，这两者都有助于他们坐在自己的路上。

<强> CSS

div.form-group{
 width:100%;
}
div.form-group > input{
    width:65%;
    display:inline-block;
}
div.form-group > label{
    width:30%;
}

小提琴：http://jsfiddle.net/2thjbt9m/3/

如果需要 JS ，您可以直接使用JS

设置样式

$('div.form-group').css({width:'100%'});
$('div.form-group > input').css({width:'65%',display:'inline-block'});
$('div.form-group > label').css({width:'30%'});

小提琴2：http://jsfiddle.net/2thjbt9m/4/

使用javascript内联表单标签和字段

2 个答案: