Блог

У меня возникли проблемы, пытаясь понять, как поместить один из входных данных / меток рядом с другим, пока все остальное выровнено по вертикали.

Я бы хотел, чтобы почтовый индекс поле ввода справа от провинции выберите. Кто-нибудь знает, что не так?

Вот что у меня есть на данный момент.

https://jsfiddle.net/0u755s4q/

HTML:

 <section class="form__wrap">
            <h3>Simply fill out the form below and click ‘SUBMIT’. Good luck!</h3>
            <p>(All fields are required unless stated otherwise)</p>
            <ol>
                <li class="form--fullbox">
                    <label for="" class="">*First Name</label>
                    <input name="" type="text" id="" maxlength="20" placeholder="" value=""/>
                </li>
                <li class="form--fullbox">
                    <label for="" class="">*Last Name</label>
                    <input name="" type="text" id="" maxlength="20" placeholder="" value=""/>
                </li>
                <li class="form--fullbox">
                    <label for="" class="">*Address Line 1</label>
                    <input name="" type="text" id="" maxlength="50" placeholder="" value=""/>
                </li>
                <li class="form--fullbox">
                    <label for="" class="">amp;nbsp;Address Line 2</label>
                    <input name="" type="text" id="" maxlength="50" placeholder="" value=""/>
                </li>
                <li class="form--fullbox">
                    <label for="" class="">*City</label>
                    <input name="" type="" id="" maxlength="25" placeholder="" value=""/>
                </li>
                <li class="form--province">
                    <label for="" class="">*Province</label>
                    <select name="" id="" class="">
                        <option value="AB">Alberta</option>
                        <option value="BC">British Columbia</option>
                        <option value="MB">Manitoba</option>
                        <option value="NB">New Brunswick</option>
                        <option value="NL">Newfoundland</option>
                        <option value="NS">Nova Scotia</option>
                        <option value="NT">Northwest Territories</option>
                        <option value="NU">Nunavut</option>
                        <option value="ON">Ontario</option>
                        <option value="PE">Prince Edward Island</option>
                        <option value="QC">Quebec</option>
                        <option value="SK">Saskatchewan</option>
                        <option value="YK">Yukon</option>
                    </select>
                </li>
                <li class="form--postalcode">
                    <label for="" class="">*Postal Code</label>
                    <input name="" type="text" maxlength="6" id="" placeholder="" value="" />
                </li>
                <li class="form--fullbox">
                    <label for="" class="">*Email</label>
                    <input name="" type="email" id="" maxlength="50" placeholder="" value="" />
                </li>   
                <li class="form--phone">
                    <label for="" class="">*Phone Number</label>
                    <input name="" type="tel" maxlength="10" id="" placeholder="" value="" />
                </li>


                <li class="form--fullbox">
                    <label for="" class="">Favourite Colour:</label>
                    <select name="" id="" class="">
                        <option value="">town1</option>
                        <option value="">town2</option>
                        <option value="">town3</option>
                        <option value="">town4</option>
                        <option value="">town5</option>
                    </select>
                </li>

                <li class="form--fullbox">
                    <input id="" type="checkbox" name="" />
                    <label for="">Text <a href="" target="_blank">Privacy Policy.</a></label>
                </li>   

                <li class="form--fullbox">
                    <input id="" type="checkbox" name="" />
                    <label for="">Text <a href="" target="_blank">Rules amp; Regulations.</a></label>
                </li>

                <li class="form--fullbox">
                    <input type="submit" value="submit" class="" id="" />
                </li>
            </ol>

        </section>
  

CSS:

 .form__wrap{
    margin: 0 auto;
    width: 80%;
    background-color: pink;
    text-align: center;
}

.form__wrap ol{
    margin: 0 auto;
    background-color: lightblue;
    width: 80%;
    text-align: right;
    list-style: none;
}

.form__wrap label{
    background-color: lightblue;
    display: inline-block;
    float: left;
    clear: left;
    width: 20%;
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
}
.form--fullbox input{
  display: inline-block;
  float: left;
  width: 75%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.form--province select{
  display: inline-block;
  float: left;
  width: 150px;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: blue;
}
.form--postalcode label{
    display: inline-block;
    float: left;
    width:15%;
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
    background-color: red;
}

.form--postalcode input{
    background-color: red;
  display: inline-block;
  float: left;
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.form--phone input{
  display: inline-block;
  float: left;
  width: 300px;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.form--fullbox select{
  display: inline-block;
  float: left;
  width: 150px;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
  

существует множество свойств с плавающей запятой imo. затем вам нужно расположить свою форму с помощью display: flex

я бы сделал это, используя что-то вроде этого

 <ol>
  <li>name</li>
  <li>surnema/li>
  <div class="postal">
    <li>province</li>
    <li>postal</li>
  </div>
  <li>...</li>
</ol>
  

и для класса postal на css я бы использовал:

 display:flex; 
justify-content: space-between;
  

с уважением

Самое простое решение — разместить li контейнеры для провинций и почтовых отправлений:

 .form--province, .form--postal {float:left;}
  

С другой стороны, я бы пересмотрел ваше использование ol and associate li . Естественным элементом группировки для ваших почтовых или адресных элементов будет тег Fieldset, но li он является единственным допустимым дочерним элементом элементов списка.