1

我对所有人还是新手，目前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;
}
4

2 回答 2

1

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

- 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;
 }

span 本质上是内联的，旨在用于块元素内部，而不是默认在它们周围有任何空间。您可以使用填充轻松解决此问题。

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

于 2013-08-05T21:37:25.510 回答
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
      &nbsp;
      %span{class: 'group-list'}= provider.specialty
于 2013-08-05T21:12:47.790 回答