如何实现Rails HAML视图中复选框与标签等元素横向排列？

核心是通过CSS控制元素布局方式，以下几种实用方案：

方案1：Flexbox布局（推荐） #

给目标单元格添加自定义类，通过弹性布局实现横向排列：

修改后的HAML代码： #

=form_for :program_type, url: admin_program_types_path do |f|
  %tr
    %td=f.text_field :name, placeholder: "Add New Program Type", class: "form-control"
    %td.inline-items
      =f.check_box :make_default, class: "checkbox"
      =f.label :make_default, class: "checkbox"
      =button_tag( :class => "btn") do
        %span.ix.ix-plus 
        Add

对应的CSS样式： #

.inline-items {
  display: flex;
  align-items: center; /* 让元素垂直居中对齐 */
  gap: 10px; /* 控制元素间的间距，可按需调整 */
  padding: 8px 0; /* 可选，优化单元格内边距 */
}

方案2：内联块元素样式 #

如果项目使用Bootstrap，可直接利用内置类；否则手动设置元素为内联块：

方式A（Bootstrap环境）： #

=form_for :program_type, url: admin_program_types_path do |f|
  %tr
    %td=f.text_field :name, placeholder: "Add New Program Type", class: "form-control"
    %td
      =f.check_box :make_default, class: "checkbox d-inline"
      =f.label :make_default, class: "checkbox d-inline mx-2"
      =button_tag( :class => "btn d-inline") do
        %span.ix.ix-plus 
        Add

d-inline将元素转为内联块，mx-2用于设置标签与其他元素的水平间距。

方式B（自定义CSS）： #

=form_for :program_type, url: admin_program_types_path do |f|
  %tr
    %td=f.text_field :name, placeholder: "Add New Program Type", class: "form-control"
    %td
      =f.check_box :make_default, class: "checkbox inline-element"
      =f.label :make_default, class: "checkbox inline-element"
      =button_tag( :class => "btn inline-element") do
        %span.ix.ix-plus 
        Add

配套CSS： #

.inline-element {
  display: inline-block;
  vertical-align: middle; /* 确保元素垂直居中 */
  margin-right: 10px; /* 元素右侧间距，最后一个元素可移除该样式 */
}

方案3：容器包裹法 #

把需要横向排列的元素放入一个容器，给容器设置布局样式：

HAML代码： #

=form_for :program_type, url: admin_program_types_path do |f|
  %tr
    %td=f.text_field :name, placeholder: "Add New Program Type", class: "form-control"
    %td
      .inline-container
        =f.check_box :make_default, class: "checkbox"
        =f.label :make_default, class: "checkbox"
        =button_tag( :class => "btn") do
          %span.ix.ix-plus 
          Add

容器CSS： #

.inline-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

内容的提问来源于stack exchange，提问作者htamayo