Переопределение полей мобильных кнопок jQuery

Question

Я вращаю свои колеса на том, что, я уверен, является простой ошибкой. не

Рассмотрим следующую jqm (версия 1.3) вид (в Haml)

#main-header{'data-role' => 'header'} 

#main-content{'data-role' => 'content'} #main-buttons 
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'} 
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'} 

таблица стилей:

#main-buttons { 
    margin: 30px; 
    margin-top: 160px; 
} 

#a { 
    margin-bottom: 60px !important; 
} 

Здесь стиль маржинальной дна Обращаюсь к кнопке "а" не имеет влияние. Моя цель - добавить некоторое вертикальное пространство между двумя кнопками. Что мне не хватает?

Визуализированное UI выглядит следующим образом:

Answer 1

Вот мой скромный ответ. Вышеупомянутые ответы больше объясняют вашу проблему.

Чтобы изменить стиль кнопки, добавьте свой стиль в .ui-btn.

Я рад, что я был помочь :)

Answer 2

Сначала убедитесь, что ссылка на таблицу стилей в списке после ссылки на мобильные таблицы стилей JQuery в головной части вашей HTML страницы. Если конфликты двух стилей, браузер будет использовать таблицу стилей, которая будет второй (например, css, которая указана ниже).

Кроме того, вы добавляете свой край поля к ID #a. Хотя это совершенно верно, просмотрите остальную часть css, чтобы увидеть, есть ли маржа, применяемая к INPUT, потому что стиль, применяемый к тегу, превосходит стили, применяемые к идентификатору.

Answer 3

Решение 1

Это кнопка, созданная с помощью тега.

Вот рабочий пример: http://jsfiddle.net/Gajotres/9bPA2/

<div data-role="content"> 
    <a data-role="button" id="button1">Button 1</a> 
    <a data-role="button" id="button2">Button 2</a> 
</div> 

#button1 { 
    margin-bottom: 50px; 
} 

Решение 2

Это кнопка, которую вы используете. К сожалению, вы можете использовать CSS, чтобы исправить это, это должно быть сделано с помощью JQuery, как это:

HTML:

<input type="button" value="Button 3" id="button3"> 
<input type="button" value="Button 4" id="button4"> 

Javascript:

$('#button3').parent().css('margin-top','50px'); 
$('#button4').parent().css('margin-top','50px'); 

Живой пример является частью верхней jsFiddle пример, так что взгляните.

Answer 4

Возможно также набор Div-элементы вокруг каждого кнопочного элемента. Затем устанавливая нижние и верхние поля для этих элементов div, кнопки расположены по вертикали, поскольку элементы div являются потомками jQuery Mobile .ui-btn: s в структуре DOM.

Параметры этого поля не заданы для всего приложения, но только для этих кнопок.

HTML/CSS пример:

<div class="ButtonDiv"> 
    <a data-role="button">Button 1</a> 
</div> 

<div class="ButtonDiv"> 
    <a data-role="button">Button 2</a> 
</div> 

<div class="ButtonDiv"> 
    <a data-role="button">Button 3</a> 
</div> 


.ButtonDiv { 
margin-top: 8px; 
margin-bottom: 8px; 
}