鏈接中的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跨度

回答

相關問題