时间戳

首页 > 解决方案 > HTML/CSS：如何使某些输入字段在表单的同一行？

html - HTML/CSS：如何使某些输入字段在表单的同一行？

问题描述

我正在处理酒店预订网页，但无法对齐输入/选择字段。例如，我当前的代码在两个不同的行中显示了名字和姓氏，但我想将它们全部放在一起。这是我的表单与我的代码的样子：

first name
last name
address 1
address 2
city 
state
zip

下面是我想要的样子：

first name last name  <<----
address 1
address 2
city state            <<----
zip

根据我的研究，我可以通过使用来做类似的事情display: inline-block，所以我尝试在我的代码中使用它，如下所示，但它没有改变任何东西。我在这里做错了什么？

#mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}
#formContainer {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    margin-top: 110px;
    background-color: white;
}
#contact {
    padding-top: 25px;
}

#customerInformationForm {
    width:50%;
    float:left;
    margin-bottom: 50px
}
#contact input {
    width: 70%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

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

#contact input [class="customerFullName"] {
    display: inline-block;
    width: 50%;
}
<div id="mainContainer">
  <div id="formContainer">
      <form id="contact" action="" method="post">
          <div id="customerInformationForm">
            <input class="customerFullName" placeholder="First name" type="text">
            <input class="customerFullName" placeholder="Last name" type="text">
            <input placeholder="Address 1" type="text">
            <input placeholder="Address 2" type="text">
        <input placeholder="City" type="text">
        <select id="state" name="state">
            <option value="State" selected>State</option>
            <option value="Alabama">AL</option>
            <option value="Alaska">AK</option>
            <option value="Arizona">AZ</option>
          </select>
          <input placeholder="ZIP" type="text">
          </div>       
      </form>
  </div>
</div>

标签： htmlcss

解决方案

你把所有那些“宽度”声明弄得一团糟。您将 div #customerInformationForm “宽度”设置为父级的一半（50% 宽度）。然后你在那个 div 中插入你的名字、姓氏等输入，并将它们的宽度设置为父级的 70%，这实际上是不可能的，并排插入两个输入（70% + 70% 等于超过 100 %，所以它显示在新行中）。重新考虑使用所有这些宽度声明，下面您将了解如何处理它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #mainContainer {
    width: 1139px;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: auto;
    text-align: center;
}
#formContainer {
    max-width: 1000px;
    width: 100%;
    height: 100%;
    margin-top: 110px;
    background-color: white;
}
#contact {
    padding-top: 25px;
}

#customerInformationForm {
/*    width:50%;*/
    float:left;
    margin-bottom: 50px;
    background-color: red;
}
#contact input {
    width: 35%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}
#contact input:nth-child(3),
        #contact input:nth-child(4) {
            width: 70%;
        }

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

#contact #customerInformationForm input .customerFullName {
    display: inline-block;
    width: 70%;
}
    </style>
</head>
<body>
    

 <div id="mainContainer">
  <div id="formContainer">
      <form id="contact" action="" method="post">
          <div id="customerInformationForm">
            <input class="customerFullName" placeholder="First name" type="text">
            <input class="customerFullName" placeholder="Last name" type="text">
            <input placeholder="Address 1" type="text">
            <input placeholder="Address 2" type="text">
        <input placeholder="City" type="text">
        <select id="state" name="state">
            <option value="State" selected>State</option>
            <option value="Alabama">AL</option>
            <option value="Alaska">AK</option>
            <option value="Arizona">AZ</option>
          </select>
          <input placeholder="ZIP" type="text">
          </div>       
      </form>
  </div>
</div>
</body>
</html>

推荐阅读