Question

我是编码的新手，我正在尝试使用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>

Answer 1

这是我的解决方案，它不是完美的，但是它将为您提供一个起点

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

Answer 2

如果您想使用flex来实现它，

SELECT SUM(bill_record.total_bill)-SUM(invoice_payments.payment) AS [LEFT AMOUNT]

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

Answer 3

您可以使用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>

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

将div并排放置，并在下面放置一个

4 个答案: