Question

问题：标题菜单项中的文本垂直对齐问题

我们正在使用 Bootstrap-3.4.1 开发前端。在添加菜单项时，我看到了一个不正确的垂直对齐问题。经过调查，我发现如果字符数<= 6，则与菜单项字符数> 6时相比，菜单项向上移动了一个像素。如下图所示，所有三个文本字段00:00:00 3 08:00:00 5 16:00:00 23 00:00:00 7的高度均为21。

但是有趣的是，所有这三个项目的父锚标签都具有不同的高度。

重定向锚标签高度= 29.72

重做锚标签高度= 28.47

Redirec 锚标签高度= 29.19

这会产生问题，因为锚标签的顶部和底部填充为5％，并且不同的高度给出了不同的上舍入填充值。知道为什么会这样吗？我会尝试分享一个小提琴来进行测试。

HTML：

#text

CSS：

<ul class="custom-nav-Items nav navbar-nav">
    <li class="dropdown">
        <a role="button" class="dropdown-toggle" aria-haspopup="true"
                            aria-expanded="false" href="#">
            Redirect
            <span class="caret"></span>
        </a>
        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
            <!-- Menu items -->
            </li>
        </ul>
    </li>
    <li class="dropdown">
        <a role="button" class="dropdown-toggle" aria-haspopup="true"
                            aria-expanded="false" href="#">
            Redire
            <span class="caret"></span>
        </a>
        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
            <!-- Menu items -->
        </ul>
    </li>
    <li class="dropdown">
        <a role="button" class="dropdown-toggle" aria-haspopup="true"
                            aria-expanded="false" href="#">
            Redirec
            <span class="caret"></span>
        </a>
        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
            <!-- Menu items -->
        </ul>
    </li>
</ul>

字体家族：open_sansregular，Helvetica Neue，Helvetica，Arial，sans-serif；

容器锚标签高度根据字符串长度而变化

0 个答案: