Пространство между встроенным текстом и элементами ввода в JADE?

Как предоставить пространство между встроенным текстом и элементами ввода в JADE?

div(data-role="horizontal", data-theme="a", data-overlay-theme="a", data-inline="true",class="ui-bar ui-grid-c")
                        div(class='ui-block-a')
                            div(data-role='fieldcontain')
                                label(for='memberaddress') Address Proof
                                textarea(id='memberaddress',name='memberaddress')
                        div(class='ui-block-b')
                            div(data-role="fieldcontain")
                                label(for="proof") Proof ID
                                select(name='proof', id='proof', data-theme='a', data-icon='bank', data-inline='true', data-native-menu="false")
                                    option(value='0') Select Proof
                                    option(value='1') Voter ID
                                    option(value='2') Driving Licence
                                    option(value='3') PANCARD
                                    option(value='4') Ration Card
                        div(class='ui-block-c')
                            div(data-role="fieldcontain")                           
                                input(type='checkbox', name='addressmatchedCheck', id='addressmatchedCheck', data-inline="true")
                                label(for='addressmatchedCheck') Address Matched

Мой вывод:

Я не могу получить место между меткой и textarea.

Ответ 1

добавьте маржу к вашему css, как предлагает jonathan ong, или вы можете добавить |   или span   между вашей меткой и текстовой областью

Ответ 2

Существует также "симпатичная" опция

Вы должны иметь возможность называть нефрит так (см. http://jade-lang.com/api/):

var fn = jade.compile('string of jade', {pretty: true});

Он будет вставлять разрывы строк и отступы в выходе между всеми узлами в вашем шаблоне.

Если вы хотите просто вставить это пространство, параметр

label(for='memberaddress') Address Proof
=' '
textarea(id='memberaddress',name='memberaddress')

Ответ 3

Как уже было определено в других ответах, проблема действительно связана с html, который создает Jade, а не css. Тем не менее, одним из способов создания некоторого пространства без изменения разметки является добавление поля справа от вашего label.

@leff упоминается с помощью =' '. Я никогда не видел этого раньше, и я не могу найти ссылку на него в документации Jade. Мне нравится, что он работает, но, не видя документов, я не решаюсь использовать его в процессе производства.

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

Вы найдете   и несколько других альтернатив "пространства" на странице w3c character entity.

Ответ 4

Вариант 1 (мой выбор)

input(type='button')
| &nbsp;
input(type='button')

Вариант 2

input(type='button')
= ' '
input(type='button')

Вариант 3

input(type='button')
|  
input(type='button')

Есть и другие, хотя....