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

Question

我有一个表格，其中联系表格有标签和字段，但它们都在换行符上。我想使用 JS 来实现标签和它们各自的字段在同一行上，以便 A/B 测试 Optimizely。

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

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

我试过将字段设置为 inline-block，但似乎没有用。

Answer 1

您可以使用自定义 CSS 覆盖样式，尽管 "bootstrap way" 可能无法做到这一点。

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%;
}

fiddle: 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%'});

fiddle 2: http://jsfiddle.net/2thjbt9m/4/

Answer 2

是的，您可以使用 JS 通过定位输入 class 并将输入设置为 inline-block:

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

FIDDLE

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

Using javascript to inline form label and fields

html

javascript

css

forms

jquery