html - 联系表混淆

Question

我的“联系原因”和“评论”框似乎被翻转了并且在不同的行上。

label {
  float: left;
  text-align: right;
  width: 10em;
  padding-right: 1em;
}

input,
textarea {
  display: block;
  margin-bottom: 2em;
}

input[type="submit"] {
  margin-left: 6em;
}

form {
  color: red;
}

<main>
  <h2>Contact Us</h2>
  <p>Required fields are marked with an asterisk *</p>
  <form>
    <label for="myName">*Name:</label>
    <input type="text" id="myName" name="myName" required="required">
    <label for="myEmail">*E-mail: </label>
    <input type="email" id="myEmail" name="myEmail" required="required">
    <label for="myPhone">Phone: </label>
    <input type="tel" id="myPhone" name="myPhone">
    <label for="reason">*Reason For Contacting:</label>
    <select class="reason">
      <option value="join">Interest in Joining</option>
      <option value="sponsor">Sponsorship</option>
      <option value="other">Other</option>
    </select>
    <label for="myComments">Comments:</label>
    <textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
    <input type="submit" value="Submit">
  </form>
</main>

Answer 1

从您的 css 我可以看到您已将 float: left 赋予 label。因此，label 向左浮动，在右侧为下一个元素留出空间。但是，input 被赋予 display: block，它占据了右边剩余的全部位置。

但是select元素默认是display:inline。因此，它们似乎混淆了。只需添加 display: block 即可进行选择。

label {
  float: left;
  text-align: right;
  width: 10em;
  padding-right: 1em;
}

select,/* add this */
input,
textarea {
  display: block;
  margin-bottom: 2em;
}

input[type="submit"] {
  margin-left: 6em;
}

form {
  color: red;
}

<main>
  <h2>Contact Us</h2>
  <p>Required fields are marked with an asterisk *</p>
  <form>
    <label for="myName">*Name:</label>
    <input type="text" id="myName" name="myName" required="required">
    <label for="myEmail">*E-mail: </label>
    <input type="email" id="myEmail" name="myEmail" required="required">
    <label for="myPhone">Phone: </label>
    <input type="tel" id="myPhone" name="myPhone">
    <label for="reason">*Reason For Contacting:</label>
    <select name="reason" class="reason">
      <option value="join">Interest in Joining</option>
      <option value="sponsor">Sponsorship</option>
      <option value="other">Other</option>
    </select>
    <label for="myComments">Comments:</label>
    <textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
    <input type="submit" value="Submit">
  </form>
</main>