我有this网站,请注意在a:hover
中将来源设为粗体。
问题是字体大小减小,最终我读到它也减少了。
您希望得到帮助的HTML中有两个错误:
a:hover
无法更改代码li
的大小。li
必须具有固定大小,而不是大小取决于内容。如何修复li
?答案 0 :(得分:2)
我不知道我是否正确理解了你的问题,但你不能放
ul#menu li
{
width:200px; //change this amount...
}
答案 1 :(得分:1)
我冒昧地触摸你的css代码以达到预期的效果。它将是:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
我做的是:
li
和a
元素中删除填充(应该为0)a
元素设置为display:block
,其宽度和高度固定为letter-spacing
和a
的{{1}}设置为1px,以便在字符之间保留相同的空格a:hover
和line-height
问题是当元素改变大小时,填充正在推动框边框。
答案 2 :(得分:1)
您可以通过
防止方框跳跃li
s width
添加到li
s padding
添加到li
s hover
取消a
并将其添加到li
-
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
重要:
li
。