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 - 非内联

回答

相关问题