Question

很抱歉，如果这是一个非常愚蠢的问题，但我是一名开发人员，我的设计技能很少，我在个人网站上工作，我遇到了一个小问题。

我有一个包含ul和li项的热门导航。这些项目包含链接<a href...，在这些标记中，我有一个<span>。

仅在链接悬停时显示范围。

CSS

div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}

问题是，跨度中有相当多的文本，当它显示时会使链接宽度变大，从而将顶部导航的其余部分推向右侧。

我能做些什么来告诉标签忽略跨度宽度而不显示跨度但不影响宽度由链接文本（非跨度）自动设置？

HTML

<div id="topnav">
   <ul>
       <li><a href="http://www.google.co.uk">Example<span>this is a link to google</span></a></li>
       <li><a href="http://www.bbc.co.uk">Another EG<span>this is another link that goes to bbc!</span></a></li>
   </ul>
</div>

值得注意的是，跨栏中的这个文字显示在导航栏下方，所以我需要全部显示。

Answer 1

好吧，如果你想要你可以简单地从流程中移除跨度，它们将以任何方式停止影响链接，只需给出跨度的绝对位置和a的相对位置。你也不需要：访问我认为，因为我猜它会阻止链接出现，如果已经访问过。像这样：

div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}

您可以更改底部值以满足您的需要，或添加左/右属性以进一步定位它们。您也可以考虑在跨度中添加宽度。位置：a上的相对值是必需的，因此跨度将知道从哪里向下50 px。

编辑：添加了已访问的类，因为它可以通过更改文本颜色来帮助ux达到一定程度。

Answer 2

只需在跨度/链接上设置宽度，这样就不会根据内容的长度自动确定宽度。

div#topnav a span { width: 50px; }

注意：50px是一个示例，您可以将其设置为您想要的任何内容。

Answer 3

尝试在“a”标记之外使用div标记，该标记具有固定的宽度，以便您的内容不会超过指定的宽度。

CSS跨越链接

3 个答案: