javascript - 如何使文本框平行

Question

我正在尝试制作一个用户计数的下拉列表，根据该计数，我想根据用户计数显示文本框的数量。所以目前我已经制作了一个下拉列表，如果他们选择一个用户，我可以显示一个用于名字的文本框和另一个用于姓氏的文本框，代码如下:

$('.selectpicker[name=state1]').change(function() {
  var i = 0;
$('.input-group').children('input').remove()
  while (i < parseInt($(this).val())) {
    $('.input-group').append('<input name="phone" placeholder="Firstname" class="form-control" type="text"><input name="phone" placeholder="LastName" class="form-control" type="text">')
    i++;
  }
})

但我希望同时显示名字和姓氏文本框，而不是这个。

我的工作pen

感谢任何帮助。

Answer 1

class form-control 使元素的宽度变为 100%。所以你需要做的是通过添加重新声明元素的宽度

style="width:50%;"

您的两个输入。那么就变成了

$('.input-group').append('<input name="phone" placeholder="Firstname" class="form-control" style="width:50%;" type="text">
                          <input name="phone" placeholder="LastName" class="form-control" style="width:50%;" type="text">')

演示:http://codepen.io/anon/pen/bWmRab