2013-08-05 3 views
1

Я еще новичок все HAML и CSS и currentyly работать на этой части кода:внесении некоторых изменений CSS в файле Haml

- 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 

Так что я заимствованные из других частей кода, который мы имели и получили это тот момент, показанный на картинке ниже

enter image description here

Но я не могу понять, как сделать некоторое пространство между значениями, которые она показывает на специальность и стоимостный

Что вы предлагаете добавить или изменить, чтобы установить эту часть?

Вот генерировать код с 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; 
} 
+0

Если это используется в другом месте, я бы также рассмотреть вопрос о создании либо помощника (Мех) или декоратора. –

+0

Есть ли файл css, связанный с этим примером? –

+0

@EricC: Да, я обновил вопрос сейчас и добавил класс списка. Но group-list-colspace имеет ничего, кроме дополнения. –

ответ

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

пролетов по самой природе там есть встроенные и предназначены для использования внутри блочных элементов, а не по умолчанию, имеющие любое пространство вокруг них. Вы можете легко обойти это с помощью прокладки.

Аналогично, если вы используете рельсы рассмотреть вопрос о создании списка поставщика в отдельные частичный

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 
+0

Действительно ли это синтаксис HAML? Пробовал, но не менял. –

+1

вы всегда можете поместить простой текст в строки HAML (см. [HAML Ref.] (Http://haml.info/docs/yardoc/file.REFERENCE.html#plain_text)). Вероятно, в вашем примере отсутствует одна строка (стоимость после 'provider.specialty'), поэтому'   'находится не в том месте. Посмотрите на исходный HTML-источник. –

+0

Спасибо за продолжение ... Я обновил свой вопрос с помощью сгенерированного источника ... после добавления nbsp, как вы предложили. –

Смежные вопросы