html - 显示 :table-cell 的高度问题

Question

我在使用 slider 寻呼机时遇到高度问题(附图片)。即 display:table-cell 没有占用高度。

这是 ul li block 的屏幕截图:

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 的间距相等，因此它充当寻呼机和进度条。

问题在于 li 的高度，它在图像中显示为水平 block (当您单击栏时，红色标记移动 - slider 的简单分页器)。我无法降低高度，有人可以帮我解决这个问题吗？

我希望寻呼机看起来像下图:

Answer 1

如果我正确理解您的问题，我相信您的代码元素的高度由字体本身的高度决定。通过这种方式，任何 CSS 高度都会被字体大小覆盖，因为它需要将文本(即使它只是一个空格)放入其中。

如果减小字体大小，则可以减小栏的高度。

类似于:

.rslides_tabs li { 字体大小:0.8em; }

应该缩小栏的高度。