Question

这是一个非常奇怪的问题。在显示表格（点击“价格和保存我的购物清单”），我认为由于某种原因文本框和下拉列表被禁用。不是这种情况;但是，它只允许我在控件的最右边点击它们 - 我必须将下拉菜单从“小”增加到“中等”以便能够与它进行交互。我不知道为什么会发生这种情况，甚至无法想到谷歌会发生什么。所以我看了与基金会揭示相关的一切都无济于事。

这是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元素作为表单标签的基本改进，因为浏览器会知道如何更好地使用它们。当然还有语义学。

基金会揭示形式奇怪的风格问题

1 个答案: