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

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

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

最佳答案

您需要将两个输入字段都放在同一个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