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

How do I get rid of the padding in my Sencha Touch 2 toolbar?

本文关键字：工具栏 填充 Touch 何去 Sencha      更新时间：2023-11-26

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

按钮之间有空隙，我不想那样。我用萤火虫来消除填充物。我以为布局类是：

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

所以在我的CSS文件中，我放了：

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

什么也没发生。

有人能帮我吗？

提前感谢

这里有几个错误

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内部.x工具栏-内部x布局-方框上没有填充

如果您使用这些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
}

希望这能帮助

相关文章：