問題描述

我使用 HTML 列表和 CSS 創建了一個水平菜單。一切都可以正常工作，除非你將鼠標懸停在鏈接上。你看，我創建了一個大膽的懸停狀態的鏈接，現在的菜單鏈接轉移，因為大膽的大小差異。

我遇到與 this SitePoint post 相同的問題。但是，該帖子沒有正確的解決方案。我搜索到任何地方的解決方案，找不到一個解決方案。當然我不會是唯一一個試圖做到這一點的人。

有人有什麼想法嗎？

P.S：我不知道菜單項中文本的寬度，所以我不能只是設置 li 項的寬度。

這是我的代碼：

HTML：

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

CSS：

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

最佳解決方案

檢查 JSfiddle 上的工作示例。這個想法是在:after 偽元素中保留粗體 (或任何:hover 狀態樣式) 的空間，並使用標題標籤作為內容的來源。

CSS：

li, a {
    display:inline-block;
    text-align:center;
}
a:hover {
    font-weight:bold;
}
a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    margin-bottom:-1px;
}

HTML：

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

次佳解決方案

如果您無法設置寬度，那麼這意味着寬度將隨着文本的粗體而改變。沒有辦法避免這種情況，除了修改每個狀態的填充/邊距等折中。

第三種解決方案

一個妥協的解決方案是用 text-shadow 偽裝，例如：

a:hover{
  text-shadow:0 0 1px black, 0 0 1px black, 0 0 1px black
}

重複 3 次陰影使它看起來沒有那麼多。

第四種方案

jquery 中的一行：

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

編輯：雖然這可以帶來解決方案，但應該提到它不能與原始帖子中的代碼一起使用。 “display:inline” 必須用浮動參數替換為寬度設置才能有效，並且水平菜單可以按預期工作。

第五種方案

你可以使用一些喜歡的東西

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然後在您的 CSS 中，只需將 span 的內容設置為粗體，並將其隱藏，並顯示為隱藏，以保持其維度。然後，您可以調整以下元素的邊距，使其適合。

我不知道這個方法是否 SEO 友善。

第六種方案

另一個想法是使用 letter-spacing

a {
  letter-spacing: 0.05px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

第七種方案

我剛剛解決了”shadow” 解決方案的問題。這似乎是最簡單有效的。

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

沒有必要重複三次陰影 (結果對我來説是一樣的) 。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。