基礎5：標籤內部的網格

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/