联系表格混合

Question

我的＆＃34;联系原因＆＃34;和＆＃34;评论＆＃34;盒子似乎被翻转并且在不同的线上。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里的问题是因为您将标签设置为float: left;，并且设置了根本没有设置浮动的元素，因此它会中断流程。

解决此问题的最简单方法是将元素分解为fieldsets。

＆＃13;

＆＃13;

fieldset {
  border: none;
  width: 100%;
  padding: 0;
  float: left;
  display: block;
}

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

＆＃13;

<main>
  <h2>Contact Us</h2>
  <p>Required fields are marked with an asterisk *</p>
  <form>
    <fieldset>
    <label for="myName">*Name:</label>
    <input type="text" id="myName" name="myName" required="required">
    </fieldset>
    <fieldset>
    <label for="myEmail">*E-mail: </label>
    <input type="email" id="myEmail" name="myEmail" required="required">
    </fieldset>
    <fieldset>
    <label for="myPhone">Phone: </label>
    <input type="tel" id="myPhone" name="myPhone">
    </fieldset>
    <fieldset>
    <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>
    </fieldset>
    <fieldset>
    <label for="myComments">Comments:</label>
    <textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
    </fieldset>
    <fieldset>
    <input type="submit" value="Submit">
    </fieldset>
  </form>
</main>

＆＃13;

＆＃13;

＆＃13;

Answer 2

从您的CSS中我可以看到您已将float: left提供给label。因此，label向左浮动，在右侧留出空间用于下一个元素。但是，input被赋予display: block，占据了整个剩余的位置。

但默认情况下select元素为display: inline。因此，他们似乎混淆了。只需添加display: block即可选择。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;