如何擺脫Sencha Touch 2工具欄中的填充？

Question

按鈕之間有空間，我不希望這樣。 我用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
}

希望這可以幫助