Question

我无法弄清楚如何将其中一个输入/标签放在另一个输入/标签旁边，而其他一切都垂直对齐。

我想在省份+选择右侧的邮政编码+输入框。有谁知道什么是错的？

这是我到目前为止所拥有的。

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="">&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 & 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;
}

Answer 1

有许多浮动属性imo。然后，您需要使用display：flex

来定位表单

我会用这样的东西来做这个

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

对于css上的课程邮件，我会使用：

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

问候

Answer 2

最简单的解决方案是为省和邮政浮动li个容器：

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

在旁注中，我会重新考虑您使用ol和关联li。邮政或地址元素的自然分组元素是Fieldset标记，但li是列表元素的唯一有效子元素。

表格，输入框位置

2 个答案: