链接中的CSS跨度

对不起，如果这是一个非常愚蠢的问题，但我是一名开发人员，而且我的设计技能在一分钟内很少，我正在个人网站上工作，而且我遇到了一个小问题。链接中的CSS跨度

我有一个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>

值得一提的，本文中的跨度出现的资产净值低于，所以我需要这一切显示。

来源

2012-02-01 ThePower

我们可以看到您的确切HTML吗？ – BoltClock 2012-02-01 20:47:29

放一个'width：10em;溢出：隐藏;在span上显示：block'，所以你可以限制它的宽度并隐藏溢出。 – 2012-02-01 20:48:43

嗯，我已经添加了一个我用于解决问题的例子。 – ThePower 2012-02-01 20:50:19

好吧，如果你想要的话，你可以简单地将流量从流量中移除，并且只要给出量程的绝对位置和相对于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达到某种程度。

来源

2012-02-01 22:02:15 Ege

只需在span/link上设置一个宽度，以便它不会根据内容的长度自动确定宽度。

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

注意：50px是一个例子，你可以将它设置为任何你想要的。

来源

2012-02-01 20:48:33

我的文本然后进入多行，我希望它仍然全部显示，因为它仍然在导航下。只是不希望导航中的链接推送其他导航项。 – ThePower 2012-02-01 20:53:57

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

来源

2012-02-01 20:50:04 pansp

链接中的CSS跨度

回答

相关问题