使名字很好地出现在同一行上

Question

我试图将一个名称和最后一个名称放在同一行上。我查看了这个问题：

html形式 - 使输入出现在同一行

上

但是，由于我的旧CSS（在应用程序中使用），因此未正确显示字段。我需要两个字段之间的小空间。我做了一个小提琴：

https://jsfiddle.net/up5bl2xn/

编辑：我的HTML代码：

 <div class="parent-split-row">
  <div class="child-split-row">
    <label class="form-label">
      First Name
    </label>
    <input type="text"
      id="js-input-first-name"
      name="first_name"
      class="form-input"
      value="{{ form.first_name.vars.value|default }}"
      placeholder="First Name"
      onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-first-name')"
      onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-first-name')"
      autofocus>
    <div id="js-input-first-name__error"
      class="form-validation">
      Please fill in your First Name
    </div>
  </div>
  <div class="child-split-row">
    <label class="form-label">
      Last Name
    </label>
    <input type="text"
      id="js-input-last-name"
      name="last_name"
      class="form-input"
      value="{{ form.last_name.vars.value|default }}"
      placeholder="Last Name"
      onkeyup="VALIDATIONS.onKeyUp('js-coach-license-registration-form','js-input-last-name')"
      onmouseup="VALIDATIONS.onMouseUp('js-coach-license-registration-form','js-input-last-name')"
      autofocus>
    <div id="js-input-last-name__error"
      class="form-validation">
      Please fill in your Last Name
    </div>
  </div>
</div>

您的帮助将不胜感激。谢谢。

Answer 1

您走了！刚刚在名字上添加了一个饰面，并将标签和输入在两个不同的div中划分：）

.name{
  float: left;
  padding-right: 4%;
}

<div class="name">
        <label for="First_Name">First Name:</label>
        <input name="first_name" id="First_Name" type="text" />
</div>
<div class="lastname">
        <label for="Name">Last Name:</label>
        <input name="last_name" id="Last_Name" type="text" /> 
</div>

Answer 2

尝试一下。;）

.parent-split-row { display: flex; }

Answer 3

使用"＆amp; nbsp"您的第一个Div class =" Child-Split-Row"，否则将PADDING直接添加到CSS中，以获取儿童 - 分类行

.child-split-row {
padding-right:10px;
}

.parent-split-row {
    display: table;
}
.child-split-row {
    display: table-cell;
}
.form-label {
    display: block;
    width: 100%;
    color: #1f1f1f;
    margin-top: 7px;
    margin-bottom: 10px;
    padding-left: 2px;
}
.form-input {
    font-family: Aileron;
    font-weight: 500;
    display: block;
    width: 100%;
    padding: 8px 10px;
    color: #1f1f1f;
    background-color: #d6d5d6;
    border: 1px solid #d6d5d6;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    height: 34px;
}

<div class="parent-split-row">
      <div class="child-split-row">
        <label class="form-label">
          First Name
        </label>
        <input type="text"
          id="js-input-first-name"
          name="first_name"
          class="form-input"
          placeholder="First Name">
      
      </div>&nbsp&nbsp
      <div class="child-split-row">
        <label class="form-label">
          Last Name
        </label>
        <input type="text"
          id="js-input-last-name"
          name="last_name"
          class="form-input"
          placeholder="Last Name">
      </div>
    </div>

Answer 4

将其添加到您的CSS文件：

.child-split-row:not(:last-child) {
    padding-right: 10px;
}

那是一种方法。