2014-12-24 3 views
0

У меня проблема с выпуском ползунка (изображение прилагается). i.e display: table-cell не принимает высоту.Высота с дисплеем: таблица-ячейка

Вот скриншот блока уль Li:

Ul li block which is pager

HTML часть ниже

<ul class="rslides_tabs rslides1_tabs"> 
<li class="rslides1_s1"><a class="rslides1_s1" href="#">&nbsp;</a></li> 
<li class="rslides1_s2"><a class="rslides1_s2" href="#">&nbsp;</a></li> 
<li class="rslides1_s3"><a class="rslides1_s3" href="#">&nbsp;</a></li> 
<li class="rslides1_s4 rslides_here"><a class="rslides1_s4" href="#">&nbsp;</a></li> 
</ul> 

CSS часть ниже:

.rslides_tabs { 
list-style: none; 
padding: 0; 
background: rgba(0,0,0,.25); 
list-style: none; 
margin: 0 auto; 
width: 71.5%; 
display: table; 
table-layout: fixed; /* the magic dust that ensures equal width */ 
} 

.rslides_tabs li { 
display: table-cell; 
margin-right: 1px; 
} 

.rslides_tabs li a{ 
display:block 
} 

мне нужно равные пространства для каждый li, поэтому он действует как пейджер плюс индикатор выполнения.

Проблема с высотой ли, которая отображается как горизонтальный блок на изображении (при нажатии на панель, красная метка перемещается - простой пейджер слайдера). Я не могу уменьшить высоту, может кто-то, пожалуйста, помогите мне в этом?

Я хочу пейджер должен выглядеть на изображение ниже:

Final result should be

+1

Можете ли вы предоставить демо-версию в JSFiddle или CodePen? Поскольку результат вашего кода не совпадает с вашим первым изображением. –

+0

Попробуйте:. .rslides_tabs li {vertical-align: top; } ' – vsync

ответ

0

Если я правильно понимаю вашу проблему правильно, я считаю, что элементы вашего кода иметь их высоту, определяемую высоту самого шрифта. Таким образом, любая высота CSS переопределяется размером шрифта, так как для этого требуется, чтобы текст (даже если это только пространство) входил внутрь.

Если вы уменьшите размер шрифта, вы можете уменьшить высоту бара.

Что-то вроде:

.rslides_tabs li { font-size:0.8em; }

должны уменьшить высоту вашего бара.

Смежные вопросы