锚不尊重高度

Question

我有一个很大的文本菜单，其中每个 link 都是垂直堆叠的。问题是活动 link space 与其他菜单项重叠，因此很难准确单击 link。

这是源代码：

<div id="menu">
    <span>
        <a href="#" id="still-life">Still&nbsp;Life</a><span class="divider">/</span><br/>
        <a href="#" id="interiors">Interiors</a><span class="divider">/</span><br/>
        <a href="#" id="books">Books</a><span class="divider">/</span><br/>
        <a href="#" id="personal">Personal</a>
    </span>
</div>

CSS:

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        display: inline-block;
        }

#menu span a:hover {
        color: #aaa;
        }

您可以在 fiddle 上看到 link 不能准确工作，因为它们比应有的大。我该如何解决？

Answer 1

对于这样的列表，您最好使用 ul 标签这些默认垂直堆叠

<ul>
    <li><a href="#" id="still-life">Still&nbsp;Life</a></li>
    <li><a href="#" id="interiors">Interiors</a></li>
    <li><a href="#" id="books">Books</a></li>
    <li><a href="#" id="personal">Personal</a></li>
</ul>

这样你就可以删除多余的标记，你也可以用 css 创建分隔线

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        }

#menu span a:hover {
        color: #aaa;
        }

#menu span a:after {
        content: "/";
        }

#menu span a:last-child:after {
        content: "";
        }

Answer 2

atmd 建议的内容对您的代码来说是很好的提示，但不会解决您的问题：

font-size: 6.1vw;
line-height: 4.7vw;

你的肇事者在吗？我可以看到您这样做是为了将行相互对接并减少行 space。你遇到的问题是使用的字体在字母的上方和下方有额外的 space，所以整个元素仍然占用 6.1vw，即使下一个元素在它下面只有 4.7vw，所以锚元素是重叠。

解决此问题的方法是在父元素上使用高度和 overflow:hidden 来减轻文本元素的额外填充，然后将锚文本定位到元素的中心父元素。一个工作示例：http://jsfiddle.net/dhyz48j3/3/

锚不尊重高度

Anchor not respecting height

html

css

anchor