如何缩小表格并将其放在中间

Question

我尽一切努力将联络表放在中间并整理一下，因为我在同一行上是姓名，电子邮件地址和年龄。我想要主题并在第二行上下拉选择，最后我试图在最后一行上获取文本区域。我得到了w3schools的联系。我曾尝试在网络和YouTube上搜索答案，但没有任何效果。

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<div class="container">
  <form action="/action_page.php">
    <input type="text" id="name" name="name" placeholder="Name">
    <input type="email" id="email" name="email" placeholder="Email Address">
    <input type="number" id="age" name="age" placeholder="Age">
    <input type="text" id="subject" name="subject" placeholder="Subject">
    <select type="dropdown" name="contact" placeholder="Age">
      <option placeholder="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

我的表格

这是我尝试获取表格的方式

Answer 1

* {
  box-sizing: border-box;
}

input[type=text],
select,
textarea,
input[type=email],
input[type=number] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  
  width:80%;
  max-width:800px;
  margin:0 auto;
}
.flex-row{
  display:flex;
  justify-content:space-between;
  align-content:center;
  align-items:strech;
  line-height:45px;
}
.flex-row input,
.flex-row textarea,
.flex-row select{
  margin:5px;
}
input[type=submit]{
margin:5px auto;
display:block;
}
.flex-row input:nth-child(3){
  flex-basis:150px;
}

<div class="container">
  <form action="/action_page.php">
    <div class="flex-row">
      <input type="text" id="name" name="name" placeholder="Name">
      <input type="email" id="email" name="email" placeholder="Email Address">
      <input type="number" id="age" name="age" placeholder="Age">
    </div>
    <div class="flex-row">
      <input type="text" id="subject" name="subject" placeholder="Subject">
      <select type="dropdown" name="contact" placeholder="Age">
        <option placeholder="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
    <div class="flex-row">
     <textarea id="message" name="message" placeholder="Talk To Us" style="height:200px"></textarea>
    </div>
    <input type="submit" value="Submit">
  </form>
</div>

使用您的容器并使用margin: auto将其居中，请参见我的代码。

抱歉，您可以在此处找到所需的内容。