时间戳

首页 > 解决方案 > HMLT/CSS：如何将一个表格分成两个部分，以便并排显示？

html - HMLT/CSS：如何将一个表格分成两个部分，以便并排显示？

问题描述

我正在为我的项目制作酒店预订页面，但无法正确填写表格。我有很多输入字段，而我当前的代码只是使它成为一个很长的页面。我的预订表基本上有两部分：客户信息和房间偏好。我想将左侧的客户信息和右侧的房间偏好对齐。由于我计划验证表单，因此我希望它在同一个<form> </form>. 如 ：

My form currently:

[ [ Customer Info ]
  [ Preferen Info ] ]

How I want it to be:

[ [ Customer Info ] [ Preferen Info ] ]

我尝试的是将表单分成两个表单，然后将它们并排放置，但我想知道是否有更好的方法......下面是我当前的代码：

#mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}

#formContainer {
    max-width: 500px;
    width: 100%;
    height: 100%;
    margin-top: 150px;
    background-color: white;
}

#contact input {
    width: 80%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact button[type="submit"] {
    width: 50%;
    border: none;
    margin: 0 0 55px;
    padding: 10px;
    font-size: 15px;
}
<div id="mainContainer">
    <div id="formContainer">
        <form id="contact" action="" method="post">
          <input placeholder="First name" type="text">
          <input placeholder="Last name" type="text">
          <input placeholder="Address 1" type="text">
          <input placeholder="Address 2" type="text">
          <input placeholder="City" type="text">
          <input placeholder="State" type="text">
          <input placeholder="ZIP" type="text">
          <input placeholder="Your Phone Number" type="tel">
          <input placeholder="Your Web Site" type="url">
          
          <input placeholder="Room Preference" type="text">
          <input placeholder="Smoking" type="text">
          <input placeholder="Number of Guest" type="text">
          <input placeholder="Date" type="text">
          
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </form>
    </div>
</div>

标签： htmlcss

解决方案

将它们包装在相同的表单标签中，但将表单字段分为两组，例如

<div id="mainContainer">
    <div id="formContainer">
        <form id="contact" style="width:100%" action="" method="post">
         <div style="width:50%; float:left;">
          <input placeholder="First name" type="text">
          <input placeholder="Last name" type="text">
          <input placeholder="Address 1" type="text">
          <input placeholder="Address 2" type="text">
          <input placeholder="City" type="text">
          <input placeholder="State" type="text">
          <input placeholder="ZIP" type="text">
          <input placeholder="Your Phone Number" type="tel">
          <input placeholder="Your Web Site" type="url">
          </div>
          <div style="width:50%; float:right;">
          <input placeholder="Room Preference" type="text">
          <input placeholder="Smoking" type="text">
          <input placeholder="Number of Guest" type="text">
          <input placeholder="Date" type="text">
          </div>
          <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </form>
    </div>
</div>

推荐阅读