Question

我有一些使用Ext.NET声明的按钮。他们有以下课程：

.btn-summary {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

我使用text功能在按钮上设置setText属性：

myBtn.setText("Some text<div class=\"summary " + myCls + "\">" + "Some other text"</div>");

这里有两个适用于文本的类：summary和myCls，其中summary是：

div.summary {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 7px;
    padding: 7px;
    display: inline-block;
}

和myCls可以是通过编程定义的两个类之一：

.bad {
    background-color: #FF4630;
    border-bottom-color: #FF4630;
    border-top-color: #FF4630;
    font-weight: bold;
    color: white;
    text-align: center;
}

.good {
    background-color: #00FFB3;
    border-color: #00FFB3;
    font-weight: bold;
    text-align: center;
}

我已经观察到，此设置中的所有内容均按预期工作（按钮按其应有的方式渲染，突出显示的部分按应有的方式出到按钮的边框），除了大约两个/三个像素在div的边界之外填充，但在按钮无法覆盖的内部填充。对HTML的检查揭示了以下内容：

<a class="x-btn btn-summary x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-small" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" tabindex="0" style="right: auto; left: 85px; margin: 0px; top: 0px;">
    <span id="btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-toolbar-small "> 
        <span id="FaultedDashboardsSummary-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-toolbar-small x-btn-button-center  x-btn-text">
            <span id="btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-toolbar-small">
                Some text
                <div class="summary good">
                    Some other text
                </div>
            </span>
        </span>
    </span>
</a>

问题似乎是.x-btn-inner-default-toolbar-small类。这里的问题是，我无法从Ext.NET端更改此设置，因为我只能访问顶层（由a标记定义的访问），因此如何将CSS类添加到Ext.JS最里面的跨度？

Answer 1

如果不看可视化内容就无法说什么，但我建议您检查CSS !important

.btn-summary {
    padding-right: 0 !important;
}

What does !important mean in CSS?

此外，您可以尝试将box-sizing添加到元素中

.btn-summary {
    box-sizing: border-box;
}

https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

鉴于内部类.x-btn-inner-default-toolbar-small导致了填充问题，因此添加了以下CSS规则即可解决该问题：

.btn-summary .x-btn-inner-default-toolbar-small {
    padding-right: inherit;
}

从Ext.JS按钮删除右填充

2 个答案: