将css应用于dijit按钮

Question

我有以下HTML和CSS：

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

#myBtn {
    margin-left: 100px;
}

CSS应该按下100px中的按钮。但由于dijit在按钮周围应用了一些额外的HTML层，因此该按钮会获得100px填充。

JSbin to show the problem

编辑：找到一个（不是IE6兼容的）解决方案：

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

Answer 1

见上文:-)使用DIV环绕并在静态CSS中使用该DIV。

我认为使用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

在这种情况下，您不应该向按钮itselft添加margin-left，而是将附加的HTML添加到创建的按钮。试试这个：

.dijitLeft{
    margin-left: 100px;
}

但这确实会为每个按钮增加一个余量。如果您不想这样做，请在创建其他HTML后使用JavaScript将边距添加到父级别。

Answer 4

内联样式正在运作。

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