Question

我有一个大的文本菜单，每个链接都是垂直堆叠的。问题是活动链接空间与其他菜单项重叠，因此难以准确地单击链接。

这是源代码：

<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;
        }

你可以在小提琴上看到链接不能正常工作，因为它们比它们应该更大。我该如何修复？

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;

你的肇事者在这里吗？我可以看到你已经做到这一点，以使线条相互对接并减少线条空间。你遇到的问题是所使用的字体在字母上方和下方都有额外的空间，所以整个元素仍然占用6.1vw，即使下一个元素只有4.7vw，所以锚元素重叠。

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

锚不尊重高度

2 个答案: