Zurb Foundation Form - 非內聯

我正在嘗試在它的標籤旁邊找到一個複選框，並在Ruby on Rails窗體中對該標籤垂直居中。理想情況下，這些也都符合Submit按鈕。Zurb Foundation Form - 非內聯

我正在使用Zurb基金會。儘管梳理了文檔，但我無法使其工作。我試過許多化身，但這裏是一個：

<div class="row collapse"> 
    <div class="large-4 columns"> &nbsp </div> 
    <div class="large-4 columns"> 
      <%= f.check_box :remember_me %> 
      <%= f.label :remember_me, 'Remember me' %> 
     <div> 
      <%= f.submit "Sign in", class: "button" %> 
     </div> 
    </div> 
    <div class="large-4 columns"> &nbsp </div> 
</div>

生成的HTML：

<div class="row collapse"> 
    <div class="large-4 columns"> 
     <input name="user[remember_me]" value="0" type="hidden"><input id="user_remember_me" name="user[remember_me]" value="1" type="checkbox"> 
     <label for="user_remember_me">Remember me</label> 
     <div> 
      <input class="button" name="commit" value="Sign in" type="submit"> 
     </div> 
    </div> 
</div>

生成的HTML也顯示了CSS文件這裏的加載順序：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet"> 
<link href="/assets/foundation_and_overrides.css?body=1" media="all" rel="stylesheet">  
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet">

3小時花費到目前爲止試圖把一個複選框旁邊的標籤。讓我更加欣賞Excel。感謝您的幫助提前。

UPDATE：

下面的代碼已經把一切都在同一行，但不垂直對齊按鈕和標籤。刪除.inline沒有任何效果，

<div class="row collapse"> 
    <%= f.check_box :remember_me, class: 'left inline' %> 
    <%= f.label :remember_me, 'Remember me', class: 'left inline' %> 
    <%= f.submit "Sign in", class: "button right" %> 
</div>

來源

2014-02-21 steel

生成的HTML看起來像什麼？ – luke2012

也許從標籤和複選框周圍的divs？默認情況下，div顯示塊，因此佔用其父母的100％寬度。 – keithwyland

已添加生成的HTML。額外的divs清理出來澄清問題。 – steel

不能完全確定生成的HTML，但我花了猜測它，並把它變成這個CodePen其中還引用了基礎框架。

已更新包含基金會4的筆。

http://codepen.io/keithwyland/pen/Cmukx

要刪除來自各地的標籤和複選框<div>元素。並在複選框<input>上獲得class="left inline"。通過添加內嵌到兩個複選框

<div class="row collapse"> 
    <div class="large-4 columns"> &nbsp </div> 
    <div class="large-4 columns"> 
      <%= f.check_box :remember_me %> 
      <%= f.label :remember_me, 'Remember me', class: "left inline" %> 
     <div> 
      <%= f.submit "Sign in", class: "button" %> 
     </div> 
    </div> 
    <div class="large-4 columns"> &nbsp </div> 
</div>

來源

2014-02-21 04:21:16 keithwyland

否定的。刪除那些div標籤不起作用。我已經玩弄了那些div來設置寬度和內聯狀態，但是這也不起作用。任何其他想法？ – steel

然後我想有其他CSS影響這個HTML不僅僅是基礎CSS。我鏈接的CodePen顯示輸入和標籤的行爲與您所描述的完全相同，唯一拉入的是Foundation CSS文件。 – keithwyland

也許你正在使用的基礎版本與我在那裏拉的基礎版本不同？我正在拉最新的想法。 – keithwyland

就可以解決這個問題：

<div class="row collapse"> 
    <div class="large-4 columns"> 
      <input name="user[remember_me]" value="0" type="hidden"><input id="user_remember_me" name="user[remember_me]" value="1" type="checkbox" class="left inline"> 
      <label for="user_remember_me" >Remember me</label> 
     <div> 
      <input class="button" name="commit" value="Sign in" type="submit"> 
     </div> 
    </div> 
</div>

所以對於Ruby代碼，我想這（但我不是偉大的的Ruby/Rails代碼）和標籤，並將其添加到您的css

input.inline, label.inline { 
    vertical-align:middle; 
    margin-bottom:0px; 
}

應該解決這個問題，因爲zurb似乎沒有考慮到您的用例。請記住所有具有垂直對齊的內聯元素：中間將匹配對齊到其他高度 - 它不適用於塊級元素。

來源

2014-02-21 17:33:52

這也沒用。奇怪，對吧？ – steel

我也在使用帶有自己CSS的預製模板，因此可能會產生干擾。有關如何強制通過模板CSS的任何建議？我嘗試了更具體的（例如創建一個div.row.columns.inline_fix的規則），但可能沒有正確的方式。我的自定義CSS當前正在加載。 – steel

您可以嘗試將css樣式標記爲！important，但不建議這樣做。 –

我知道它是在6個月前發佈的，但我仍然想貢獻我的2c。在這些情況下，我使用網格，所以對於每個標籤輸入對，我添加兩列。

在第一列中，我放置了一個標籤類，第二個放置了輸入。或者，就你而言，相反。然後從1-11到11-1（取決於你想放置它的位置）選擇你的色譜柱比例，然後去那裏。

<div class="row collapse"> 
<div class="large-4 large-centered columns"> 
    <div class="large-2 columns"> 
     <%= f.check_box :remember_me, class: "right" %> 
    </div> 
    <div class="large-8 columns"> 
     <%= f.label :remember_me, 'Remember me' %> 
    </div>   
    <div class="large-2 columns"> 
     <%= f.submit "Sign in", class: "button" %> 
    </div> 
</div>

同時，注意我如何去除含有& NBSP字符居中中間DIV 2個的div，只是用「大集中」級上的內容DIV：

<div class="large-4 large-centered columns">...</div>

來源

2014-08-26 02:34:48

我最近有類似的問題。我試着翻譯我的解決方案以適應您的問題。

<div class="row collapse" > 
    <div> 
    <%= f.check_box :remember_me %> 
    <%= f.label :remember_me, "Remember moi", class: "inline-right" %> 
    </div> 
    <div class="large-2 columns inline-right"> 
    <%= f.submit "Sign in", class: "button" %> 
    </div> 
</div>

可能需要在某處包含偏移量（例如「小偏移量-1」）。在按鈕或按鈕的div上。

來源

2014-11-25 23:50:13 Ben

Zurb Foundation Form - 非內聯

回答

相關問題