Css 基础5：网格内选项卡 我想建立一个复杂的形式，使用基础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> 字段1 选择1 ... 字段2

在该代码中，网格

large-6

的行为异常，输入字段向左倾斜。有人能建议解决这个问题吗？谢谢您的关注。

假设您希望文本字段和选择框位于同一行上？ 您需要将small-6添加到每个large-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>

字段1
选择1
...
字段2

或者是内联标签？ 这里有两个例子，希望这有帮助

小提琴：