rails css bootstrap 对齐多个表单复选框答案

【问题标题】：rails css bootstrap align multiple form check_boxesrails css bootstrap 对齐多个表单复选框
【发布时间】：2014-08-02 18:21:20
【问题描述】：

我正在尝试制作 Rails 表单并在图像上对齐多个复选框，当我使用 Chrome 浏览器时布局工作正常，但当我使用其他浏览器时，例如。 Firefox Safari 复选框偏移，这是 Chrome 布局，这是 Firefox 布局

这是我的表单代码

<div id="container-test">
<div class="pagination">

<div class="pagination bgg"> 
<%=f.check_box :var, :style => "vertical-align: -450px; margin-left: 58px" %>
<%=f.check_box :var1, :style => "vertical-align: -430px; margin-left: 4px" %>
<%=f.check_box :var2, :style => "vertical-align: -410px; margin-left: -37px" %>
<%=f.check_box :var3, :style => "vertical-align: -430px; margin-left: -35px" %>
<%=f.check_box :var4, :style => "vertical-align: -395px; margin-left: 4px" %>
<%=f.check_box :var5, :style => "vertical-align: -370px; margin-left: 4px" %>
<%=f.check_box :var6, :style => "vertical-align: -344px; margin-left: -42px" %>
<%=f.check_box :var7, :style => "vertical-align: -370px; margin-left: -34px" %>
<%=f.check_box :var8, :style => "vertical-align: -333px; margin-left: 17px" %>
<%=f.check_box :var9, :style => "vertical-align: -303px; margin-left: 10px" %>
<%=f.check_box :var10, :style => "vertical-align: -303px; margin-left: -64px" %>
<%=f.check_box :var11, :style => "vertical-align: -273px; margin-left: 4px" %>
<%=f.check_box :var12, :style => "vertical-align: -263px; margin-left: 2px" %>
<%=f.check_box :var13, :style => "vertical-align: -244px; margin-left: 5px" %>
<%=f.check_box :var14, :style => "vertical-align: -244px; margin-left: -60px" %>
<%=f.check_box :var15, :style => "vertical-align: -222px; margin-left: 4px" %>
<%=f.check_box :var16, :style => "vertical-align: -212px; margin-left: 3px" %>
<%=f.check_box :var17, :style => "vertical-align: -194px; margin-left: 4px" %>
<%=f.check_box :var18, :style => "vertical-align: -194px; margin-left: -60px" %>
<%=f.check_box :var19, :style => "vertical-align: -170px; margin-left: 4px" %>
<%=f.check_box :var20, :style => "vertical-align: -163px; margin-left: 30px" %>
<%=f.check_box :var21, :style => "vertical-align: -132px; margin-left: -22px" %>
<%=f.check_box :var22, :style => "vertical-align: -136px; margin-left: -40px" %>
<%=f.check_box :var23, :style => "vertical-align: -160px; margin-left: -14px" %>
<%=f.check_box :var24, :style => "vertical-align: -124px; margin-left: 40px" %>
<%=f.check_box :var25, :style => "vertical-align: -96px; margin-left: -2px" %>
<%=f.check_box :var26, :style => "vertical-align: -94px; margin-left: -40px" %>
<%=f.check_box :var27, :style => "vertical-align: -112px; margin-left: -30px" %>
<%=f.check_box :var28, :style => "vertical-align: -124px; margin-left: 58px" %>
<%=f.check_box :var29, :style => "vertical-align: -90px; margin-left: 8px" %>
<%=f.check_box :var30, :style => "vertical-align: -82px; margin-left: -40px" %>
<%=f.check_box :var31, :style => "vertical-align: -100px; margin-left: -36px" %>
<%=f.check_box :var32, :style => "vertical-align: -88px; margin-left: 50px" %>
<%=f.check_box :var33, :style => "vertical-align: -118px; margin-left: 6px" %>
<%=f.check_box :var34, :style => "vertical-align: -96px; margin-left: 4px" %>
<%=f.check_box :var35, :style => "vertical-align: -80px; margin-left: -36px" %>


</div>
</div>
<% end %>

【问题讨论】：

您能否分享工作链接。已为浏览器添加了重置样式或尝试提供固定宽度并与复选框左对齐

标签： css ruby-on-rails twitter-bootstrap checkbox simple-form

【解决方案1】：

您正在使用 css margin 和 vertical-align 属性对齐复选框，这是不正确的做法，因为不同的浏览器可以以不同的方式处理它（您只是遭遇）。解决问题的最简单方法是在图像上使用相对位置，然后使复选框绝对定位。这将始终根据图像对齐您的复选框。您需要执行以下操作：

#some-id-of-image{
  position: relative;
}

#checkbox-1{
  position: absolute;
  left: 30px;  // change them accordingly
  top: 20px;   // change them accordingly
}

详情请查看absolute positioning inside relative positioning

【讨论】：