Jquery，带DOM的有序表单输入和标签答案

【问题标题】：Jquery, ordered form input and label with DOMJquery，带DOM的有序表单输入和标签
【发布时间】：2014-05-21 00:17:48
【问题描述】：

小问题。我想将标签设置在输入框的左前方，以便它们在同一行内。

任何帮助都会很棒。

我的 HTML：

<div class="row">
 <div class="col-12">
  <label for="fname">First Name</label>
  <input type="text" class="form-control input-lg" name="FNAME" id="FNAME">
 </div>
</div>
<div class="row">
 <div class="col-12">
  <label for="lname">Last Name</label>
  <input type="text" class="form-control input-lg" name="LNAME" id="LNAME">
 </div>
</div>

Jquery 我试过了：

$('.row.col-12 label').each(function() {
  $(this).insertBefore( $(this).next('input') );
});

表格的样子： enter link description here

一些 CSS：

form-group {
margin-bottom:15px;
}

.col-12 {
    width:100%
    }

.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.input-sm {
  height: 30px;
  line-height: 30px;
}

textarea.input-sm {
  height: auto;
}

.input-lg {
  height: 45px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

select.input-lg {
  height: 45px;
  line-height: 45px;
}

textarea.input-lg {
  height: auto;
}

【问题讨论】：

你可以使用 CSS 吗？
jsfiddle.net/TWfDs
小提琴上面我只是复制和粘贴你的DOM，标签与文本框在同一行。这是你想要的还是？？？
哦，我希望，它们也附加了很多 CSS，所以目前标签位于输入框的顶部。
嗯...你也可以发布你的css吗？理想情况下，css 样式会影响您发布的 DOM 部分。

标签： javascript jquery html forms dom

【解决方案1】：

我试图理解您的问题，但只是将您的 DOM 放入小提琴中，每个标签与每个文本框位于同一行。

jsfiddle.net/TWfDs

但如果你的意思是名字和姓氏应该在同一行，你可以试试下面。

$(".row").css({"display":"inline-block"});

http://jsfiddle.net/TWfDs/1/

-----更新----

如果您仍然可以通过 js 设置样式，并且可以为文本框设置静态宽度，则标签和文本框对齐。

http://jsfiddle.net/TWfDs/10/

$("#FNAME").css({"display":"inline-block", "width":"300px"});

【讨论】：