显示高度问题：table-cell

Question

我有滑块寻呼机的高度问题（附图像）。即显示：table-cell没有达到高度。

以下是ul li块的截图：

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的高度，它在图像中显示为水平块（当您单击条形图时，红色标记移动 - 滑块的简单分页器）。我无法降低身高，有人可以帮我这个吗？

我希望寻呼机看起来如下图所示：

Answer 1

如果我正确理解您的问题，我相信您的代码元素的高度取决于字体本身的高度。通过这种方式，任何CSS高度都会被font-size覆盖，因为它需要文本（即使它只是一个空格）才能适应内部。

如果缩小字体大小，则可以降低条形的高度。

类似的东西：

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

应缩小酒吧的高度。