将 div 并排放置，并在下方放置一个答案

【问题标题】：place divs next to each other and one below将 div 并排放置，并在下方放置一个
【发布时间】：2019-01-07 16:24:09
【问题描述】：

我是编码新手，我正在尝试使用 Flex 属性制作一个联系表单，以便我可以将我的“姓名”和“电话号码”水平并排放置，并将“消息”放置在下方。它们的宽度必须相同。我无法用CSS弄清楚。

下面是我的 HTML 代码：

<div class="contactcontainer">
  <form action="">
    <div class="input">
      <p>First name</p>
      <input type="text" name="firstname" placeholder="Your first name...">


      <p>Phone number</p>
      <input type="text" name="pnumber" placeholder="your phone number">
    </div>
    <div class="message">
      <p>Your message</p>
      <input type="text" name="message" placeholder="type your message">
    </div>

  </form>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以使用flexbox 实现此目的。

并记住为您的表单使用语义标记，例如使用label 作为标签而不是p 标签。

.contactcontainer label {
  display: block;
}

.input {
  display: flex;
}

.input > div {
  margin-right: 8px;
}

<div class="contactcontainer">
  <form action="">
      <div class="input">
          <div>
            <label for="firstname">First name</label>
            <input id="firstname" type="text" name="firstname" placeholder="Your first name...">  
          </div>
          
          <div>
            <label for="pnumber">Phone number</label>
            <input id="pnumber" type="text" name="pnumber" placeholder="your phone number">
          </div>
      </div>
      <div class="message">
          <label for="message">Your message</label>
          <textarea id="message" type="text" name="message" placeholder="type your message"></textarea>
      </div>
  </form>
</div>

【讨论】：

@Jonas.D，不客气！不要忘记为问题选择正确答案，以便将其标记为已归档。

【解决方案2】：

这是我的解决方案，它并不完美，但它会给你一个起点

* {
  box-sizing: border-box;
}

.contactcontainer {
  width: 500px;
}

.input {
  display: flex;
}

.message input {
  display: block;
  width: 100%;
}

.l,
.r {
  flex: 1;
}

.l input,
.r input {
  width: 100%;
}

<div class="contactcontainer">
  <form action="">
    <div class="input">
      <div class="l">
        <p>First name</p>
        <input type="text" name="firstname" placeholder="Your first name...">

      </div>
      <div class="r">
        <p>Phone number</p>
        <input type="text" name="pnumber" placeholder="your phone number">
      </div>


    </div>
    <div class="message">
      <p>Your message</p>
      <input type="text" name="message" placeholder="type your message">
    </div>

  </form>
</div>

【讨论】：

【解决方案3】：

如果你想用 flex 来实现，那么

   
.input { display: flex; flex-direction: row; flex-wrap: wrap; }

<div class="contactcontainer">
            <form action="">
                <div class="input">
                  <div class="inline">
                    <p>First name</p>
                    <input type="text" name="firstname" placeholder="Your first name...">
                  </div>
                  <div class="inline">
                    <p>Phone number</p>
                    <input type="text" name="pnumber" placeholder="your phone number">
                 </div> 
                </div>
                <div class="message">
                    <p>Your message</p>
                    <input type="text" name="message" placeholder="type your message">
                </div>

            </form>
        </div>

【讨论】：

【解决方案4】：

使用FlexBox

.input {
  display: flex;
}

input {
  
  width: 100%;
}

.hor{
  flex: 1;
}

<div class="contactcontainer">
  <form action="">
    <div class="input">
      <div class="hor">
        <p>First name</p>
        <input type="text" name="firstname" placeholder="Your first name...">

      </div>
      <div class="hor">
        <p>Phone number</p>
        <input type="text" name="pnumber" placeholder="your phone number">
      </div>


    </div>
    <div class="message">
      <p>Your message</p>
      <input type="text" name="message" placeholder="type your message">
    </div>

  </form>
</div>

编辑：

使用type=Number 进行号码验证

.input {
  display: flex;
}

input {
  
  width: 100%;
}

.hor{
  flex: 1;
}

<div class="contactcontainer">
  <form action="">
    <div class="input">
      <div class="hor">
        <p>First name</p>
        <input type="text" name="firstname" placeholder="Your first name...">

      </div>
      <div class="hor">
        <p>Phone number</p>
        <input type="number" name="pnumber" placeholder="your phone number" min=1>
      </div>


    </div>
    <div class="message">
      <p>Your message</p>
      <input type="text" name="message" placeholder="type your message">
    </div>

  </form>
</div>

【讨论】：