Вкладки JQuery UI внизу, я не могу выровнять стрелку для активной вкладки

Question

Вкладки JQuery UI внизу, я не могу выровнять стрелку для активной вкладки

0

я пытаюсь разрушить мои мозги над этим все последние 2 дня

это моя скрипка 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;
}

Прошу прощения за то, что я не смог нормально объяснить скриншот, и вы поймете

San 27 окт. 2013, в 14:49

Источник

0

где вы хотите разместить его?
Tushar Gupta - curioustushar 27 окт. 2013, в 13:37
0

я обновил свой вопрос со скриншотом
San 27 окт. 2013, в 15:28

Теги:

jquery

css3

jquery-ui

tabs

2 ответа

0

Предполагая, что вы хотите, чтобы стрелка выравнивалась по левому краю с текстом:

.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/

pete 27 окт. 2013, в 12:51

Ещё вопросы

я обновил свой вопрос со скриншотом

Tushar Gupta · Accepted Answer · 2013-10-27T23-32-00.000Z

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

Благодаря Tushar я попробовал то же самое, и это сработало. Вы можете увидеть на www.spheretekk.com/bc. большое спасибо
@San Добро пожаловать, рады помочь :).