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

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>

在 gird 大小 7 内的第一个输入控件(电子邮件)。

第二个输入控件(地址)在 8 号网格内。

我在下图中附上了缺少现有结果和预期结果的屏幕

代码片段的链接附在下面的评论中。

Answer 1

将您的代码更改为此 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>

最终结果