如何制作两列垂直的字段？

Question

我添加了不同部分的代码，现在我对于要保留什么和不是什么都感到困惑。我正在尝试使用2个垂直列的联系表单。我可以获得有关添加/保留和删除内容的说明吗？ （见下面的代码）。任何帮助将不胜感激。

<div class="clearfix">

<div class>

width:50%;
float:left;

[text* your-name placeholder "*Your full name"] <br/>

[email* your-email placeholder "*Your email"] <br/>
</div>

<div class>

    width:50%;
    float:right;

[tel* your-tel placeholder "*Your phone number"] <br/>

[text* your-zip placeholder "*Your zipcode"] <br/>
    </div>
</div>

<label> What school do you go to? </label><br>
[select* menu include_blank "Alabama School of Fine Arts" "Altamont" "Birmingham-Southern College" "Briarwood Christian School" "Enlightium Academy (Online School)" "Homewood High School" "Hoover High School" "Indian Springs School" "Islamic Academic of Alabama" "Jefferson State Community College" "John Carroll Catolic High School" "Mountain Brook High School" "Oak Mountain High School" "Spain Park High School" "UAB - University of Alabama in Birmingham" "Vestavia Hills High School" "Westminster School" "Other"] </br>

<label> What grade are you in? </label>
[select* menu-2 include_blank "5th grade" "6th grade" "7th grade" "8th grade" "9th grade (Freshman)" "10th grade (Sophomore)" "11th grade (Junior)" "12th grade (Senior)" "College" "Not at school" "Other"] </br>

<label> How can we help you? </label><br>
    [checkbox* checkbox "Conjugation" "Conversation" "Grammar" "Homeworks" "Learn the Basics" "Test Preparation" "Other"] </br>

[text your-message 20x20 placeholder "Additional Comments"]

<div class="row">
<center>[submit "Submit"]</center></div>

Answer 1

您是否只想将短输入字段放在列中，而将长问题放在页面宽度上？如果是，试试这个：

<div class="clearfix">

    <div style="float:left; width:50%;">
        [text* your-name placeholder "*Your full name"] <br/>

        [email* your-email placeholder "*Your email"] <br/>
    </div>

    <div style="float:right; width:50%;">
        [tel* your-tel placeholder "*Your phone number"] <br/>

        [text* your-zip placeholder "*Your zipcode"] <br/>
    </div>

    <div>

        <label> What school do you go to? </label><br>
        [select* menu include_blank "Alabama School of Fine Arts" "Altamont" "Birmingham-Southern College" "Briarwood Christian School" "Enlightium Academy (Online School)" "Homewood High School" "Hoover High School" "Indian Springs School" "Islamic Academic of Alabama" "Jefferson State Community College" "John Carroll Catolic High School" "Mountain Brook High School" "Oak Mountain High School" "Spain Park High School" "UAB - University of Alabama in Birmingham" "Vestavia Hills High School" "Westminster School" "Other"] </br>

        <label> What grade are you in? </label>
        [select* menu-2 include_blank "5th grade" "6th grade" "7th grade" "8th grade" "9th grade (Freshman)" "10th grade (Sophomore)" "11th grade (Junior)" "12th grade (Senior)" "College" "Not at school" "Other"] </br>

        <label> How can we help you? </label><br>
            [checkbox* checkbox "Conjugation" "Conversation" "Grammar" "Homeworks" "Learn the Basics" "Test Preparation" "Other"] </br>

        [text your-message 20x20 placeholder "Additional Comments"]

        <div class="row">
            <center>[submit "Submit"]</center>
        </div>

    </div>

</div>