css - Zurb 基础表格 - 非内联

Question

我试图在它的标签旁边获得一个复选框，并以 Ruby on Rails 形式垂直居中于该标签。理想情况下，这些也都与提交按钮一致。

我正在使用 Zurb Foundation。尽管梳理了文档，但我无法让它工作。我已经尝试了很多变体，但这是一个:

<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。提前感谢您的帮助。

更新:

以下代码已将所有内容放在一行中，但并未垂直对齐按钮和标签。删除 .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>

Answer 1

不太确定生成的 HTML，但我猜测了一下，并将其放入了同样引用了 Foundation 框架的 CodePen 中。

已更新笔以包含 Foundation 4。

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

您想删除 <div>标签和复选框周围的元素。并得到 class="left inline"在复选框上 <input> .

<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 代码不是很好):

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