javascript - 如何去除 Sencha Touch 2 工具栏中的填充？

Question

这里是:http://jsfiddle.net/sd1212/awHkT/2/

按钮之间有空间，我不希望这样。我用 Firebug 试图消除填充。我认为布局类是:

 x-inner x-toolbar-inner x-layout-hbox

所以在我的 CSS 文件中，我输入:

.x-inner x-toolbar-inner x-layout-hbox
{
   padding: 0 !important;
}

什么都没发生。

有人可以帮帮我吗？

提前致谢

Answer 1

这里有一些错误

CSS 语法

.x-inner x-toolbar-inner x-layout-hbox 语法错误。

如果你有这样的东西

<div class="x-inner">
  <div class="x-toolbar-inner">
    <div class="x-layout-hbox">

然后你会使用:

.x-inner .x-toolbar-inner .x-layout-hbox

或

.x-inner > .x-toolbar-inner > .x-layout-hbox

如果你有这样的事情:

<div class="x-inner x-toolbar-inner x-layout-hbox">

然后你会使用:

.x-inner.x-toolbar-inner.x-layout-hbox

.x-inner.x-toolbar-innerx-layout-hbox 上没有填充

如果您使用这些 CSS 类检查 div，您可以在 Firebug 中看到没有定义的填充。因此再次将其设置为 0 不会改变任何内容。

去掉按钮之间的空格

但是，按钮有一个设置的填充和边距定义如下:

.x-toolbar .x-button {
  margin: 0 .2em;
  padding: .3em .6em;
  height:2.2em // of whatever you want
}

所以如果你想修改它，你应该重写这个类

最后但同样重要的是:不要覆盖 Sencha Touch CSS 类

不要覆盖 Sencha Touch CSS 类，使用工具栏上的 cls 属性，例如:

cls:'my-toolbar',

然后是这样的:

.my-toolbar .x-button {
  margin: 0;
  padding: 0;
  height:2.2em // of whatever you want
}

希望对你有帮助