使名称很好地出现在同一行答案

【问题标题】：Make name appear on the same line nicely使名称很好地出现在同一行
【发布时间】：2019-02-28 22:00:48
【问题描述】：

我试图将名字和姓氏放在同一行。我查看了这个问题：

html form - make inputs appear on the same line

但由于我的旧 css（在应用程序中使用），这些字段无法正确显示。我需要在两个字段之间留一点空间。我做了一个小提琴：

编辑：我的 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>

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

【问题讨论】：

标签： html css

【解决方案1】：

给你！只是在名字上添加了一个 padding-right 并将标签和输入分成两个不同的 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>

【讨论】：

感谢您的回复。我选择了另一个答案，因为它很短，我不想再次划分标签。

【解决方案2】：

试试这个。 ;)

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

【讨论】：

【解决方案3】：

在你的第一个 div class="child-split-row" 之后使用 "&nbsp" 或者在你的 css 中为 child-split-row 类添加填充

.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>

【讨论】：

【解决方案4】：

将此添加到您的 CSS 文件中：

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

这是一种方法。

【讨论】：