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，但我对它进行了猜测并将其放入此CodePen中，该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>

Answer 2

您可以通过向复选框和标签添加内联并将其添加到您的css

来解决此问题

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

应该解决问题，因为zurb似乎没有考虑到你的用例。请记住，所有具有垂直对齐的内联元素：middle将匹配彼此的高度 - 它不适用于块级元素。

Answer 3

我知道它是在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>

另外，请注意我如何移除包含＆amp; nbsp个字符的2个div来居中中间div，只需使用＆＃34;大中心＆＃34;您的内容div上的课程：

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

Answer 4

我最近遇到了类似的问题。我尝试翻译我的解决方案以适合您的问题。

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

可能需要在某处包含偏移量（例如，“small-offset-1”）。按钮或按钮的div。

Zurb基金会表格 - 不是内联

4 个答案: