如何删除两个文本字段之间的空格

Question

我想删除两个文本字段之间的空格并将它们居中对齐。 代码：

    <div class="form-row">
       <div class="col-3" id="fn1">
          <input type="text" class="form-control" placeholder="First name" 
          name="firstName">
       </div></br>
       <div class="col-3" id="ln1">
           <input type="text" class="form-control" placeholder="Last name" 
           name="lastName">
       </div>
     </div>
</div>

我要删除名字和姓氏之间的空格。谢谢你。

CSS样式：

<style type="text/css">

p{
        text-align: center;
        font-size: 40px;
        font-family: initial;
        text-decoration: underline;
        font-style: italic;
    }

    .btn-outline-success{
        display: block; 
  margin: 0 auto;
    }

nav{
  float:right;
}

body{
  background-color: #F9F9FB;
}

.form-row > div{
      margin:0 auto;
      width:250px;

}

.col-3 > div
{
  margin:0 auto;
}

Answer 1

您需要将两个输入字段都放在相同的div /列中，并将宽度定义为50％（甚至更小，例如47％，以容纳任何填充或边距）

<div class="form-row">
  <div class="col-3" id="fn1">
    <input type="text" class="form-control half-input" placeholder="First name" name="firstName">

    <input type="text" class="form-control half-input" placeholder="Last name" name="lastName">
  </div>
</div>

请注意，两个字段都在同一div中，并且我为这两个字段添加了新类：“半输入”。样式定义为

.half-input {
  display: inline-block;
  width: 47%;
}

这是工作中的JSFidlle