Question

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

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>

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

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

在您的第一个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>

Answer 3

尝试一下。 ;）

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

Answer 4

将此添加到您的CSS文件：

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

那是做到这一点的一种方式。

使名称很好地显示在同一行上

4 个答案: