Блог

Главная - Вопросы по программированию - HTML / CSS: Как сделать определенные поля ввода в одной строке формы?

HTML / CSS: Как сделать определенные поля ввода в одной строке формы?

#html #css

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

Комментарии:

1. Не полагайтесь на заполнитель в качестве метки

Ответ №1:

Вы немного напутали со всеми этими объявлениями «ширины». Вы сделали свой div #customerInformationForm «width» для половины родительского элемента (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>

Ответ №2:

Используйте семантические теги, подобные fieldset вашему преимуществу, чтобы группировать элементы. Я также выступаю за правильное использование label , а не за использование атрибута place holder для этой цели.

В приведенном ниже примере может потребоваться немного стилизации, но это даст вам представление.

Он использует flexbox для встраивания поля там, где это требуется.

 #customerInformationForm {
  padding-top:2em;
}

fieldset {
  border: none;
  position:relative;  
}

#customerInformationForm  fieldset {
  padding-left:0;
}

#customerInformationForm {
  background-color:#DDD;
}

#customerInformationForm > fieldset {
  background-color:#EEE;
  padding: 1.5em 1em;
  margin-bottom: 0.5em;
  border-radius:5px;
}

input, select {
  width:100%;
}


legend {
  font-weight: bold;
  padding-left: 0;
  position:absolute;
  top:0;
}

label {
  display: block;
}

.flex {
  display:flex;  
  align-items:stretch;
}

.flex > .form_group {
  flex:1;
}

.form_group {
  margin-right:10px;
}  
 <div id="mainContainer">
  <div id="formContainer">
    <form id="contact" action="" method="post">
      <fieldset id="customerInformationForm">
        <legend>Customer Information</legend>
        <fieldset class="customer_name flex">
          <legend>Customer Name</legend>
          <div class="form_group">
            <label for="firstName">First Name</label>
            <input class="customerFullName" id="firstName" placeholder="Eg: John" type="text">
          </div>
          <div class="form_group">
            <label for="lastName">Last Name</label>
            <input class="customerFullName" placeholder="Eg: Smith" id="lastName" type="text">
          </div>
        </fieldset>
        <fieldset class="address">
          <legend>Address</legend>
          <div class="form_group">
            <label for="address1">Address 1</label>
            <input type="text" id="address1">
          </div>
          <div class="form_group">
            <label for="address1">Address 2</label>
            <input type="text">
          </div>
          <fieldset class="city_state flex">
            <div class="form_group">
              <label for="City">City</label>
              <input type="text" id="City">
            </div>
            <div class="form_group">
              <label for="state">State</label>
              <select id="state" name="state">
                <option value="" selected></option>
                <option value="Alabama">AL</option>
                <option value="Alaska">AK</option>
                <option value="Arizona">AZ</option>
              </select>
            </div>
          </fieldset>
          <div class="form_group">
            <label for="zip">Zip</label>
            <input id="zip" type="text">
          </div>
        </fieldset>
      </fieldset>
    </form>
  </div>
</div>