如何在基础5的左侧有一个多输入，在基础5的右侧有一个输入

Question

如何将City，State和Zipcode输入移动到应有的位置？我一直在弄乱行和end，pull，push和offset类，但我想我还没找到合适的组合。任何帮助都会很棒。谢谢！

我的模态HTML： <a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a> <div id="customerModal" class="reveal-modal" data-reveal> <h3>Customers</h3> <form> <div class="row"> <div class="large-6 columns"> <label>Business Name <input type="text" placeholder="Enter Business Name" /> </label> </div> <div class="large-6 columns"> <label>Contact Name <input type="text" placeholder="Enter Contact Name" /> </label> </div> </div> <div class="row"> <div class="large-6 columns"> <label>Business Phone <input type="email" placeholder="Enter Business Phone Number" /> </label> </div> <div class="large-6 columns"> <label>Contact Phone <input type="text" placeholder="Enter Contact Phone Number" /> </label> </div>
</div> <div class="row"> <div class="large-6 columns"> <label>Address 1 <input type="text" placeholder="Enter Address" /> </label> </div> <div class="large-6 columns"> <label>Contact Email <input type="text" placeholder="Enter Contact Email" /> </label> </div> </div> <div class="row"> <div class="large-6 columns"> <label>Address 2 <input type="text" placeholder="Enter Address" /> </label> </div> <div class="large-6 columns"> <label>Notes <textarea placeholder="Enter Optional Notes" rows="10"></textarea> </label> </div> </div> <div class="row"> <div class="large-6 columns end"> <label>City <input type="text" placeholder="Enter City" /> </label> </div> </div> <div class="row"> <div class="large-6 columns"> <label>State <select> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </label> </div> </div> <div class="row"> <div class="large-6 columns">
<label>Zipcode <input type="text" placeholder="Enter zipcode"> </label> </div> </div>
<input type="submit" class="add-btn button right small" value="Add"> <a class="close-reveal-modal">&#215;</a><!--Close Button--> </form> </div><!--Modal-->

Answer 1

一种解决方案是创建巨型柱。所以整个左侧是一列，整个右侧是一列。

（抬头不要盲目复制粘贴，我删除了一些字段以节省时间。）

稍微详细说明，您正在为“注释”和“地址”创建动态大小的行。您需要将它们分成不同的容器，以便它们不共享相同的高度。我发现我需要每隔一段时间对其进行可视化，这样你就可以用chrome打开你的页面并右键单击并转到inspect元素，然后当你突出显示代码时，你可以看到哪些行和列包含哪些元素和漂亮的元素小彩盒。

    <a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
    <div id="customerModal" class="reveal-modal" data-reveal>
        <h3>Customers</h3>
        <form>
            <div class="row">
                <div class="large-6 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <label>Business Name
                                <input type="text" placeholder="Enter Business Name" />
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>City
                                <input type="text" placeholder="Enter Business Name" />
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>State
                                <input type="text" placeholder="Enter Business Name" />
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>Zip
                                <input type="text" placeholder="Enter Business Name" />
                            </label>
                        </div>
                    </div>
                </div>
                <div class="large-6 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <label>Contact Name
                                <input type="text" placeholder="Enter Contact Name" />
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>Notes
                                <textarea placeholder="Enter Optional Notes" rows="10"></textarea>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>