Question

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

任何帮助都会很棒。

我的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;
}

Answer 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"});

Jquery，用DOM命名表单输入和标签

1 个答案: