代码之家 › 专栏 › 技术社区 › VAAA

使用当前表单样式的CSS两列表单div

sass css

VAAA · 技术社区 · 7 年前

我的表格有以下样式:

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

  }
}

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

这就是它的样子:

我需要的是我必须添加其他列,使文本字段更小,以便我可以在字段右侧添加复选框。

大概是这样的:

2 回复 | 直到 7 年前

Nicolai Schmid 7 年前

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

Kenan Balija 7 年前

尝试使用“Flex”示例css:

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

flexcss非常适合一行操作。

如果您不熟悉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>

Nico Diz 6 年前

你可以试试 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%;
}