применение css к кнопке dijit

Question

У меня есть следующие HTML и CSS:

<button id="myBtn" dojoType="dijit.form.Button">Testing</button>

#myBtn {
    margin-left: 100px;
}

CSS должен нажимать кнопку в 100px.Но поскольку dijit применяет некоторые дополнительные слои HTML вокруг кнопки, кнопка получает отступ 100px.

JSbin, чтобы показать проблему

edit: Найдено одно (не совместимое с IE6) решение:

[widgetid=myBtn] { margin-left: 100px; }

Answer 1

см. Выше :-) Окружите DIV и используйте этот DIV в своем статическом CSS.

Я думаю, что оформление с помощью HTML может быть более простым решением, чем пытаться запекать больше в виджет или шаблон виджета.

Answer 2

Вместо применения стиля по ID, сделайте это через класс.

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

.myBtn { margin-left: 100px; }

Код:

<button class="myBtn" dojoType="dijit.form.Button" id="myBtn">Testing</button>

http://jsbin.com/ejoma/2

Answer 3

В этом случае вы не должны добавлять поле left-button к кнопке itselft, а к дополнительному HTML-фрагменту вокруг создаваемой кнопки.Попробуйте это:

.dijitLeft{
    margin-left: 100px;
}

Но это действительно добавит поле для каждой кнопки.Если вы не хотите этого, добавьте поле в родительский диапазон, используя JavaScript после создания дополнительного HTML.

Answer 4

Встроенный стиль работает.

<button id="myBtn" dojoType="dijit.form.Button" style="margin-left:100px">Testing</button>