有人可以协助我在表单上对齐复选框div吗？

Question

我有一张表格，我试图在我的网站上看起来像这样。

到目前为止，我已经能够几乎完全呈现图像了。当复选框项目是一定长度时，一切都很顺利。但是，我意识到当我将复选框项的名称更改为更短或更长时，我发现我的表单变得非常糟糕。这就是图像现在的样子。

正如您所看到的那样，复选框都很复杂，根本没有对齐。

我的HAML和CSS文件看起来像这样。

       %div
        .stack-title
          = stack.title
        .stack-checkbox
          = check_box_tag 'stacked', 0, false, 'data-stack' => stack.to_param,
                                               'data-project' => @project.to_param,
                                               'data-stackentry' => find_stack_entry(stack, @project).to_param,
                                                target: counter
        .stack-message.message-position{ id: "message#{counter}" }
        = image_tag('spinner.gif', class: 'hidden', id: 'related_spinner', target: counter)

.stack-title
  width: 180px
  display: inline-block

.stack-checkbox
  display: inline-block
  width: 100px
  text-align: right


.stack-message
   display: inline-block

我希望有人能指点我到某个地方的JS小提琴，这可以帮助我完成我想要实现的目标。这个HTML / CSS并不是我尝试过的唯一配置，但我已经尝试了很多，以至于我无法在这个问题上发布所有内容，但基本上我一直在尝试弄乱边缘，文本对齐，垂直对齐和浮动。到目前为止没有运气。有人可以帮助我......我已经做了很长时间了：/。 感谢。

Answer 1

在复选框和文本周围创建一个div。向左浮动文本，向右浮动复选框