Css ExtJS显示按钮元素上方的文本

我们正在尝试开发一个进度条，在其中我们必须对齐按钮顶部的文本。我们尝试使用不同的布局，但它没有出现。如果可能的话，一些人可以建议一种使用CSS的方法。在此附上示例

---

CSS应该可以解决您的问题，这是一个有点硬编码的解决方案，不能作为通用解决方案使用，但您可以从这里开始：

首先，让我们创建一个带有进度条的面板，进度条之间有一个按钮：

Ext.create('Ext.panel.Panel', {
    renderTo: document.body,
    height: 100,
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    defaults: {
        margin: 2
    },
    items: [{
        xtype: 'progressbar',
        style: {
            borderRadius: '5px'
        },
        height: 10,
        width: 200,
        text: ' ',
        value: 1
    }, {
        xtype: 'container',
        cls: 'btnWrapper',
        items: [{
            xtype: 'button',
            height: 30,
            cls: 'fa fa-check',
            style: {
                color: 'white'
            }
        }]
    }, {
        xtype: 'progressbar',
        style: {
            borderRadius: '5px'
        },
        height: 10,
        text: ' ',
        width: 200
    }]
});

下面是CSS来处理其余部分：

<style>
    .btnWrapper:before {
        content: 'BASICS';
        font-weight: bold;
        position: absolute;
        top: -20px;
        left: -10px;
        width: 100%;
        color: orange;
        text-align: center;
    }
    .btnWrapper .x-btn {
        border-radius: 30px;
    }
</style>

.btnWrapper:之前{
内容:"基础";；
字体大小：粗体；
位置：绝对位置；
顶部：-20px；
左：-10px；
宽度：100%；
颜色：橙色；
文本对齐：居中；
}
.btnWrapper.x-btn{
边界半径：30px；
}

---

Fiddle:

它们是一个容器中的两个不同组件吗？是的，现在我们将其设计为两个容器中的独立组件，并使用边距对齐，但屏幕到屏幕的对齐方式不同，因此如果可能，我们希望使用CSS在勾号按钮顶部添加文本。将您的代码放到Fiddle中