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

たとえば、スパンにいくつかのクラスを追加し、そのうちの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;
 }

スパンは本質的にインラインであり、ブロック要素の内部で使用されることを意図しており、デフォルトでそれらの周りにスペースを持たないことを意図しています。これはパディングで簡単に回避できます。

同様に、Rails を使用している場合は、プロバイダー リストを別のパーシャルに配置することを検討してください。

于 2013-08-05T21:37:25.510 に答える