基金會揭示形式怪異風格問題

這是一個很奇怪的問題。在顯示窗體上（點擊「價格並保存我的購物清單」），我認爲出於某種原因文本框和下拉菜單被禁用。不是這種情況;但是，它只允許我在控件的最右側點擊它們 - 我必須將「下」從「小」增加到「中」，以便能夠與它進行交互。我不知道爲什麼會發生這種情況，甚至無法想象谷歌會如何。所以我看過與基金會揭示有關的一切都無濟於事。基金會揭示形式怪異風格問題

這是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>

來源

2013-10-24 Jen Born

發送鏈接，我來看看。 –

您在使用Foundation網格時遇到一些主要問題。你有後續的列加起來超過十二個，並且嵌套在其他列中的列沒有插入行。如果您通過the Foundation Docs' grid section並相應地重寫您的代碼，我敢打賭，您的問題將得到解決。請特別注意標題爲「無限嵌套網格」的部分。

我也會建議基本的改進，比如使用label元素作爲表單標籤，因爲瀏覽器會知道如何更好地使用它們。當然，對於語義。

來源

2013-10-24 19:30:28

非常感謝您的幫助！甚至只是建議我重新閱讀文檔，因爲我的佈局非常不正確是非常有幫助的。我很高興這是一個簡單的修復:) –

基金會揭示形式怪異風格問題

回答

相關問題