css - 基金会揭示形式怪异的风格问题

Question

这是一个很奇怪的问题。在显示表格(单击“价格并保存我的购物 list ”)上，我认为出于某种原因文本框和下拉列表被禁用。不是这种情况;但是，它只允许我在控件的最右侧单击它们——我必须将下拉菜单从“小”增加到“中”才能与之交互。我不知道为什么会这样，甚至想不出要谷歌什么。所以我查看了与 Foundation Reveal 相关的所有内容，但都无济于事。

这是 jsfiddle，但虽然它在我的网站上有效，但它在 jsfiddle 上不起作用。如果您想实际查看它，我会向您发送指向我网站的链接。:http://jsfiddle.net/jenborn/TQjm9/

这是模态形式，因为如果我链接到 jsfiddle 显然我必须包含代码:

  <form id="saveShoppingList" action="" method="POST" class="custom">
   <div class="small-12 columns">
     <div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
     <div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
     <div class="small-8 columns"><input type="text" id="name" name="name" /></div>
     <div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
     <div class="small-8 columns"><select id="beer_style"  class="medium"><? echo $style_opt ?></select></div>
     <div id="makemebold" class="large-4 columns">Keep Private:</div>
     <div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
   </div>

  <div class="row">
   <div class="small-6 large-centered columns">
     <button type="submit" class="button radius">Go</button>
     <button type="reset" class="button radius alert">Reset</button>
  </div>
  </form>

Answer 1

您在使用 Foundation 的网格时遇到了一些重大问题。您有后续的列加起来超过十二个，并且列嵌套在其他列中而没有中间行。如果你通过the Foundation Docs' grid section并相应地重写您的代码，我敢打赌您的问题将得到解决。请特别注意标题为“无限嵌套您的网格”的部分。

我还建议对表单标签使用 label 元素等基本改进，因为浏览器会知道如何更好地使用它们。当然还有语义。