jquery - 底部的 Jquery UI 选项卡，我无法对齐活动选项卡的箭头

Question

在过去的两天里，我一直在努力破坏我的大脑

这是我的小提琴 http://jsfiddle.net/wd7a6/

我在活动标签中添加了箭头，但我无法定位它

请让我知道我做错了什么

.ui-state-active a::before {
    content: "";
    position: absolute;
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid black;
    top:-20; 
    display:block;
}

我很抱歉无法正确解释看截图，你会明白的

Answer 1

假设您希望箭头与文本左对齐：

.ui-state-active a:before {
    content: "";
    position: relative; /*Use relative to ensure that the generated content is not removed from normal document flow, otherwise it will overlap the other content */
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
    top: 0px;
    left: -10px; /* specify a negative left to control offset on the left */
    display: inline-block; /*Use inline-block to ensure that the generated content stays inline with the other content */
}

演示：http: //jsfiddle.net/wd7a6/1/

如果您希望它与文本右对齐，请使用:after并指定一个正左作为与选项卡文本的偏移量。

演示：http: //jsfiddle.net/wd7a6/2/

Answer 2

演示

.ui-state-active a::before {
    content: "";
    position: absolute;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
    top: -5px;//added this
    left: 20px;//added this
    display: block;
}