链接中的CSS跨度

很抱歉，如果这是一个非常愚蠢的问题，但我是一个开发人员，我的设计技能是最低限度的，我在一个个人网站上工作，我被一个小问题卡住了

我有一个顶部导航，带有

ul

和

li

项目。这些项目包含链接

---

值得注意的是，span中的文本显示在导航下方，因此我需要全部显示。

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

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

---

注意：

50px

就是一个例子，您可以将其设置为您想要的任何值。

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

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

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

---

编辑：添加了已访问的类，因为它可以通过更改文本颜色在一定程度上帮助用户体验。

放置

宽度：10em；溢出：隐藏；显示：在跨距上阻塞

，这样您可以限制其宽度并隐藏溢出。是的，我已经在我的问题中添加了一个我使用的示例。然后我的文本转到多行，我希望它仍然显示在导航下方。只是不希望导航中的链接推动其他导航项目。

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

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