使用基础网格系统对齐输入

Question

我编写了两个不同大小的输入控件的代码。

<div class="row">
    <div class="large-7 columns ">
        <div class="row">
            <div class="large-4 columns">
                <label class="left inline">Email</label> <small>*</small>
            </div>
            <div class="large-8 columns">
                <input type="email" class="input-required" placeholder="Example@bluebell.com" required>
            </div>
        </div>
    </div>
</div>
<div class="large-5 columns" /></div>
<div class="row">
    <div class="large-8 columns ">
        <div class="row">
            <div class="large-3 columns ">
                <label class="left inline">Address</label><small>*</small>

            </div>
            <div class="large-8 columns ">
                <input type="text" class="input-required left" placeholder="qewwrrty street">
            </div>
        </div>
    </div>
</div>

网格大小7内的第一个输入控件（电子邮件）。

网格大小8内的第二个输入控件（地址）。

我已将屏幕上的现有结果和预期结果附加在下图中

以及代码段的链接附在以下评论中。

Answer 1

您错过了关闭第一个.row div。这就是导致控件错误对齐的原因。 See my fiddle here

Answer 2

将您的代码更改为此DEMO

<div class="row">
    <div class="large-8 columns ">
        <div class="row">
            <div class="large-2 columns">
                <label class="left inline">Email</label> <small>*</small>
            </div>
            <div class="large-10 columns">
                <input type="email" class="input-required" placeholder="Example@bluebell.com" required>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="large-8 columns ">
        <div class="row">
            <div class="large-2 columns ">
                <label class="left inline">Address</label><small>*</small>

            </div>
            <div class="large-10 columns ">
                <input type="text" class="input-required left" placeholder="qewwrrty street">
            </div>
        </div>
    </div>
</div>

最终结果