底部的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

DEMO

.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;
}