Question

我的表单具有以下样式：

.UserForm {

  &__form {
    padding: 10px 24px;
    width: 100%;
  }
  &__form-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;

    .form-field,
    .form-select,
    .textarea {
      width: 60%;
    }

    .profile-image {
       width: 60%;
    }

    .form-label {
      margin-right: 12px;
      width: 30%;
      // text-align: right;
    }

    & > .Password {
      width: 70%;
      max-width: 60%!important;
      margin: 0;
    }

  }
}

这是HTML

<form name="setUser" autocomplete="off" class="UserForm__form">
    <div class="form-row UserForm__form-row">
      <label class="form-label" for="firstName">First Name</label>
      <input
        v-focus
        id="firstName"
        name="firstName"
        class="form-field"
      >
      <span
        v-show="errors.has('firstName')"
        class="form-help is-danger"
      >{{ errors.first('firstName') }}</span>
    </div>

<div class="form-row UserForm__form-row">
  <label class="form-label" for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    class="form-field"
  >
  <span
    v-show="errors.has('lastName')"
    class="form-help is-danger"
  >{{ errors.first('lastName') }}</span>
</div>

</form>

它是这样的：

我需要的是仅用于名字字段行。我必须添加其他列，以便文本字段较小，以便可以在该字段的右侧添加一个复选框。

类似这样的东西：

Answer 1

尝试使用“ Flex”示例CSS：

.UserForm__form {
  display: flex;
  flex-direction: row;
}

Flex css非常适合单行操作。

如果您不熟悉flex，这是一个非常好的资源： https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

这是摘要中的简化示例：

.UserForm__form {
  display: flex;
  flex-direction: row;
}

<form name="setUser" autocomplete="off" class="UserForm__form">

  <div class="form-row UserForm__form-row">
    <label class="form-label" for="firstName">First Name</label>
    <input v-focus id="firstName" name="firstName" class="form-field">
    <input type="checkbox" />
    <label>Active</label>
  </div>

</form>

Answer 2

您可能应该将第一列包装在具有其自己的flexbox的另一个容器中：

<form name="setUser" autocomplete="off" class="UserForm__form">
    <div class="form-row UserForm__form-row">
      <div class="UserForm__form-row__firstName-row">
         <label class="form-label" for="firstName">First Name</label>
         <input
           v-focus
           id="firstName"
           name="firstName"
           class="form-field"
         >
         <span
           v-show="errors.has('firstName')"
           class="form-help is-danger"
         >{{ errors.first('firstName') }}</span>
      </div>
    </div>

<div class="form-row UserForm__form-row">
  <label class="form-label" for="lastName">Last Name</label>
  <input
    id="lastName"
    name="lastName"
    class="form-field"
  >
  <span
    v-show="errors.has('lastName')"
    class="form-help is-danger"
  >{{ errors.first('lastName') }}</span>
</div>

</form>

CSS：

.UserForm__form-row__firstName-row {
   display: flex;
   justify-content: space-between;
}

Answer 3

您可以尝试this：

In yout HTML, add a label for the checkbox:

<label class="myCheckbox">
    <input type="checkbox" />
    Active
</label>

And in the SCSS, add this styles after the form-field width:

.form-field:first-of-type {
    width: 40%;
}
.myCheckbox {
    width: 20%;
}

CSS两列表单Divs使用当前表单样式

3 个答案: