Question

只是努力了解代码的位置导致我的网页上出现一条小垂直线：http://www.upreach.org.uk/undergraduates/benefits.php

该行似乎将主导航链接到子导航分支，此处带有注释的屏幕截图：http://upreach.org.uk/old/css-vertical-line.png

我试图找出我想要在另一个页面上实现相同的行，但无法让它工作：http://www.upreach.org.uk/undergraduates/is-upReach-for-me.php

非常感谢您提供任何帮助......

Answer 1

它绘制该行的以下元素：

<span class="anchor">&nbsp;</span>

它位于以下链接的末尾，即用户看到的页面：

<a href="benefits.php" class="issue-link">
   <span>What We</span>
   Offer
   <span class="anchor">&nbsp;</span> <!-- I am here! -->
</a>

元素风格：

#navigation ul li a .anchor {
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #333333;
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

Answer 2

<强> HTML

<span class="anchor">&nbsp;</span>

<强> CSS

#navigation ul li a .anchor {
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #333;
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -4000px;
}

就在那里。它需要一些额外的HTML标记。但是如果你愿意，可以用jquery添加它。

$(document).ready(function() {    
    $("#navigation ul li.active a").append('<span class="anchor">&nbsp;</span>');
}

CSS问题 - 导致这条垂直线的原因是什么？

2 个答案: