html - 难以在 HTML 表单中对齐输入字段

Question

问题：

我有一个表单，其标签和输入字段在同一行上彼此相邻，但由于标签的宽度不同，输入字段未对齐。我想将标签更改为相同的宽度，以便输入字段彼此垂直排列。下面链接的图片说明了这个问题。我试图为文本设置宽度，但它没有改变任何东西。 链接到图片 1 链接到图片 2

#UpdateForm {
  text-align: center;
  position: relative;
  margin-top: 2vw;
}

#UpdateForm fieldset {
  background: white;
  border: 0 none;
  border-radius: 0px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 40px 30px;
  box-sizing: border-box;
  width: 60%;
  left: 50%;
  transform: translate(-50%, 0%);
  /*stacking fieldsets above each other*/
  position: relative;
}


/*Hide all except first fieldset*/

#UpdateForm fieldset:not(:first-of-type) {
  display: none;
}


/*inputs*/

#UpdateForm input,
#UpdateForm textarea,
#UpdateForm select {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 0px;
  margin-bottom: 20px;
  width: 70%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 25px;
}

#UpdateForm input:focus,
#UpdateForm textarea:focus,
#UpdateForm select {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #c7aa8b;
  outline-width: 0;
  transition: All 0.5s ease-in;
  -webkit-transition: All 0.5s ease-in;
  -moz-transition: All 0.5s ease-in;
  -o-transition: All 0.5s ease-in;
}


/*buttons*/

#UpdateForm .action-button {
  width: 150px;
  background: #c7aa8b;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 25px;
  cursor: pointer;
  padding: 25px 10px !important;
  margin: 15px 5px;
}

#UpdateForm .action-button:hover,
#UpdateForm .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #c7aa8b !important;
}

.inputText {
  font-size: 30px;
  margin-right: 2vw;
  font-weight: 600;
  text-align: left;
}

<div class="row">
  <div class="col-md-12 col-md-offset-6">
    <form id="UpdateForm" method="get" runat="server">

      <fieldset>
        <h2 class="fs-title">Update your stats</h2>
        <div class="col">
          <a class="inputText">First Name: </a>
          <input type="text" id="SignUpName" runat="server" name="fName" placeholder="First Name" />
        </div>
        <div class="col">
          <a class="inputText">Last Name: </a>
          <input type="text" name="lName" runat="server" id="SignUpLastName" placeholder="Last Name" />
        </div>
        <div class="col">
          <a class="inputText">Email: </a>
          <input type="text" id="email" runat="server" name="email" placeholder="Email" />
        </div>
        <div class="col">
          <a class="inputText">BrithDate: </a>
          <input placeholder="Birth Date" runat="server" name="birthDate" id="birthDate" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" maxlength="256" />
        </div>
        <div class="col">
          <a class="inputText">City: </a>

          <select id="city" runat="server" name="city">
            <option value="no">City</option>

          </select>

        </div>
        <div class="col">
          <a class="inputText">Address: </a>
          <input type="text" id="address" runat="server" name="address" placeholder="Address" />
        </div>
        <div class="col">
          <a class="inputText">Zip Code: </a>
          <input type="text" id="zipCode" runat="server" name="zipCode" placeholder="Zip Code" />
        </div>




      </fieldset>

    </form>

标签： htmlcssasp.netbootstrap-4

Answer 1

希望这就像您正在尝试做的事情。.col我对包含标签和输入字段的元素应用了一些样式。特别是，我使用 flexbox 来正确定位标签和输入字段。

#UpdateForm {
  text-align: center;
  position: relative;
  margin-top: 2vw;
}

.col {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.inputText {
  font-size: 30px;
  margin-right: 2vw;
  font-weight: 600;
  text-align: right;
  width: 40%;
}

#UpdateForm fieldset {
  background: white;
  border: 0 none;
  border-radius: 0px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 40px 30px;
  box-sizing: border-box;
  width: 60%;
  left: 50%;
  transform: translate(-50%, 0%);
  /*stacking fieldsets above each other*/
  position: relative;
}

/*inputs*/

#UpdateForm input,
#UpdateForm textarea,
#UpdateForm select {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 0px;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 25px;
  flex-grow: 1;
}

#UpdateForm input:focus,
#UpdateForm textarea:focus,
#UpdateForm select {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #c7aa8b;
  outline-width: 0;
  transition: All 0.5s ease-in;
  -webkit-transition: All 0.5s ease-in;
  -moz-transition: All 0.5s ease-in;
  -o-transition: All 0.5s ease-in;
}

<div class="row">
  <div class="col-md-12 col-md-offset-6">
    <form id="UpdateForm" method="get" runat="server">

      <fieldset>
        <h2 class="fs-title">Update your stats</h2>
        <div class="col">
          <label for="SignUpName" class="inputText">First Name: </label>
          <input type="text" id="SignUpName" runat="server" name="fName" placeholder="First Name" />
        </div>
        <div class="col">
          <label id="SignUpLastName" class="inputText">Last Name: </label>
          <input type="text" name="lName" runat="server" id="SignUpLastName" placeholder="Last Name" />
        </div>
        <div class="col">
          <label for="email" class="inputText">Email: </label>
          <input type="text" id="email" runat="server" name="email" placeholder="Email" />
        </div>
        <div class="col">
          <label for="birthDate" class="inputText">BrithDate: </label>
          <input placeholder="Birth Date" runat="server" name="birthDate" id="birthDate" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" maxlength="256" />
        </div>
        <div class="col">
          <label for="city" class="inputText">City: </label>

          <select id="city" runat="server" name="city">
            <option value="no">City</option>
          </select>

        </div>
        <div class="col">
          <label for="address" class="inputText">Address: </label>
          <input type="text" id="address" runat="server" name="address" placeholder="Address" />
        </div>
        <div class="col">
          <label for="zipCode" class="inputText">Zip Code: </label>
          <input type="text" id="zipCode" runat="server" name="zipCode" placeholder="Zip Code" />
        </div>
      </fieldset>
    </form>
  </div>
</div>