html - 表单元素未对齐

Question

我的问题是，使用弹性框时，y 表单没有正确对齐。

/* Article Styling Definitions */
article {
  display: flex;
  flex: 4;
  background-color: chartreuse;
}

#article_left {
  flex: 1;
  align-content: center;
}

#article_right {
  flex: 1;
  align-content: center;
}

.cta {
  flex: 30;
  border: 1px solid black;
  border-radius: 5px;
  margin: 25px;
  padding-left: 5px;
}

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

form > div {
  flex: 45%;
}

.label {
  text-align: right;
  padding-right: 5px;
}

<section>
  <article>
    <div id="article_left">
      <p>Call Us</p>
    </div>
    <div id="article_right">
      <h2>Contact Us!</h2>
      <form id="contact_form">
        <div class="label">
          <label for="contact_name">Full name:</label>
        </div>
        <div>
          <input type="text" id="contact_name" name="contact_name" placeholder="Name">
        </div>
        <div class="label">
          <label for="contact_phone">Mobile number:</label>
        </div>
        <div>
          <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
        </div>
        <div class="label">
          <label for="contact_email">Email address:</label>
        <div>
          <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
        </div>
        <div class="label">
          <label for="contact_message">Message:</label>                 
        </div>
        <div>
          <textarea rows="4" cols="40" id="contact_message" name="contact+message"></textarea>
        </div>
        <div class="button">
          <button type="submit">Submit</button>
        </div>

      </form>
    </div>
  </article>
</section>

我目前正在学习并正在完成一项评估，但我无法解决这个问题。

如果你能帮助我，那就太棒了——这是一项基本任务，但 flexbox 把所有东西都搞砸了（我们必须使用 flex box）

标签： htmlcssflexbox

Answer 1

我想你正在寻找这个。

/* Article Styling Definitions */
article {
  display: flex;
  flex: 4;
  background-color: chartreuse;
}

#article_left {
  flex: 1;
  align-content: center;
}

#article_right {
  flex: 1;
  align-content: center;
}

.cta {
  flex: 30;
  border: 1px solid black;
  border-radius: 5px;
  margin: 25px;
  padding-left: 5px;
}

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}


.input-box {
  padding-right: 5px;
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
label {
  width: 45%;
  padding-right: 5px;
  text-align: right;
}
input, textarea {
  width: 55%;
}

<section>
  <article>
    <div id="article_left">
      <p>Call Us</p>
    </div>
    <div id="article_right">
      <h2>Contact Us!</h2>
      <form id="contact_form">
        <div class="input-box">
          <label for="contact_name">Full name:</label>
          <input type="text" id="contact_name" name="contact_name" placeholder="Name">
        </div>
        <div class="input-box">
          <label for="contact_phone">Mobile number:</label>
          <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
        </div>
        <div class="input-box">
          <label for="contact_email">Email address:</label>
          <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
        </div>
        <div class="input-box">
          <label for="contact_message">Message:</label>               
          <textarea rows="4" cols="40" id="contact_message" name="contact+message"></textarea>
        </div>
        <div class="button">
          <button type="submit">Submit</button>
        </div>

      </form>
    </div>
  </article>
</section>