內(nèi)嵌元素在懸停時(shí)移動(dòng)我使用HTML列表和CSS創(chuàng)建了一個(gè)水平菜單。所有的工作，它應(yīng)該，除了當(dāng)你懸停在鏈接上。您看，我為鏈接創(chuàng)建了一個(gè)粗體懸停狀態(tài)，現(xiàn)在由于粗體大小的差異，菜單鏈接發(fā)生了變化。我遇到了同樣的問題這個(gè)SitePoint哨所..但是，該員額沒有適當(dāng)?shù)慕鉀Q辦法。我到處尋找解決辦法卻找不到。當(dāng)然，我不可能是唯一一個(gè)嘗試這樣做的人。有人有什么想法嗎？答：我不知道菜單項(xiàng)中文字的寬度，所以我不能直接設(shè)置李項(xiàng)的寬度。.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: #000;
margin-left: 8px;
margin-right: 5px; }.nav li a:hover{
text-decoration: none;
font-weight: bold; }.nav li.first { border: none; }<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>
3 回答
縹緲止盈
TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
li {
display: inline-block;
font-size: 0;}li a {
display:inline-block;
text-align:center;
font: normal 16px Arial;
text-transform: uppercase;}a:hover {
font-weight:bold;}a::after {
display: block;
content: attr(title);
font-weight: bold;
height: 0;
overflow: hidden;
visibility: hidden;}<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>
:hover:after
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
添加回答
舉報(bào)
0/150
提交
取消