Question

我想构建一个使用Foundation 5标签和网格的复杂表单，我发现网格很奇怪。这是代码：

<dl class="tabs" data-tab>
    <dd class="active"><a href="#panel_a">Subform A</a></dd>
    <dd><a href="#panel_b">Subform B</a></dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="panel_a">
        <div class="large-6 columns">
            <label for="field1">Field 1</label>
            <input type="text" id="field1" value="" />
        </div>
        <div class="large-6 columns">
            <label for="select1">Select 1</label>
            <select id="select1">
                ...
            </select>
        </div>
    </div>
    <div class="content" id="panel_b">
        <div class="large-12 columns">
            <label for="field2">Field 2</label>
            <input type="text" id="field2" value="" />
        </div>
    </div>
</div>

在此代码中，网格large-6非常奇怪，输入字段向左倾斜。任何人都可以建议修复此问题吗？谢谢你的关注。

Answer 1

假设您想要同一行上的文本字段和选择框？你需要为每个大6添加小6，如下所示：

    <dl class="tabs" data-tab>
        <dd class="active"><a href="#panel_a">Subform A</a>

        </dd>
        <dd><a href="#panel_b">Subform B</a>

        </dd>
    </dl>
    <div class="tabs-content">
        <div class="content active" id="panel_a">
            <div class="row collapse">
                <div class="large-6 small-6 columns">
                    <label for="field1">Field 1</label>
                    <input type="text" id="field1" value="" />
                </div>
                <div class="large-6 small-6 columns">
                    <label for="select1">Select 1</label>
                    <select id="select1">...</select>
                </div>
            </div>
        </div>
        <div class="content" id="panel_b">
            <div class="row collapse">
                <div class="large-12 columns">
                    <label for="field2">Field 2</label>
                    <input type="text" id="field2" value="" />
                </div>
            </div>
        </div>
    </div>

或者也许是内联标签？这是两个例子的小提琴，希望这有帮助。

小提琴：http://jsfiddle.net/defonic/5szAV/

基础5：标签内的网格

1 个答案: