在HAML文件中进行一些CSS修改

Question

我仍然是所有HAML和CSS的新手，并且目前正在处理这部分代码：

  - my_provider_list.each do |provider|
    %li{ class: 'group_classes group-list-colspace', id: provider.name }
      = provider.name
      %span{class: 'group-list'}= provider.value
      %span{class: 'group-list'}= provider.specialty

所以我借用了我们所拥有的代码的其他部分并将其提供到下图所示的那一点

但我无法弄清楚如何在专业和成本价值显示的值之间留出一些空间

您建议添加或修改哪些内容以修复该部分？

这是添加了html空间的生成代码：

<li class='group_classes group-list-colspace' id='Physician 2679'>
Physician 2679
<span class='group-list'>218395</span>
&nbsp;
<span class='group-list'>Pediatrics</span>
</li>

列表项的CSS就是这样：

.group-list {
  float:right;
}

Answer 1

只需在它们之间添加一个不可破坏的空格：

  - my_provider_list.each do |provider|
    %li{ class: 'group_classes group-list-colspace', id: provider.name }
      = provider.name
      %span{class: 'group-list'}= provider.value
       
      %span{class: 'group-list'}= provider.specialty

Answer 2

我会在跨距中添加一些类，并增加其中一个的填充，例如

- my_provider_list.each do |provider|
  %li{ class: 'group_classes group-list-colspace', id: provider.name }
    = provider.name
    %span{class: 'group-list-value group-list'}= provider.value
    %span{class: 'group-list-specialty group-list'}= provider.specialty

然后在专业

中添加一些样式填充

 .group-list-specialty {
   padding-left: 20px;
 }

跨越那里非常自然是内联的，并且意味着在块元素内部使用，而不是默认在它们周围有任何空间。你可以通过填充轻松解决这个问题。

同样，如果您使用rails，请考虑将提供者列表放入单独的部分