修复尺寸标签“li”和粗体字体尺寸减小

Question

我有this网站，请注意在a:hover中将来源设为粗体。 问题是字体大小减小，最终我读到它也减少了。

您希望得到帮助的HTML中有两个错误：

1. 当盟友以粗体显示时，来源不应减少。 如果a:hover无法更改代码li的大小。
2. 标记li必须具有固定大小，而不是大小取决于内容。如何修复li？
的大小

Answer 1

我不知道我是否正确理解了你的问题，但你不能放

ul#menu li
{
   width:200px; //change this amount...
}

Answer 2

我冒昧地触摸你的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
将文字放在中心位置

问题是当元素改变大小时，填充正在推动框边框。

Answer 3

您可以通过

防止方框跳跃

1. 浮动li s
2. 将width添加到li s
3. 将左右padding添加到li s
4. 从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/

重要：

1. 更大胆的文字仍在跳跃，但方框没有
2. 您只能点击文字**但是如果您愿意，可以使用js点击整个li。