css - 有人可以帮助我对齐表单上的复选框 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 Fiddle，它可以帮助我完成我想要实现的目标。这个 HTML/CSS 不是我尝试过的唯一配置，但我尝试了太多，以至于我不可能在这个问题上全部发布，但基本上我一直在尝试弄乱边距、文本对齐、垂直对齐和 float 。到目前为止没有运气。有人能帮帮我吗……我已经为此工作太久了:/。谢谢。

Answer 1

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