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

时间:2011-06-08 15:25:15

标签: html css size html-lists

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

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

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

3 个答案:

答案 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;
}

我做的是:

  • lia元素中删除填充(应该为0)
  • a元素设置为display:block,其宽度和高度固定为
  • letter-spacinga的{​​{1}}设置为1px,以便在字符之间保留相同的空格
  • 使用a:hoverline-height
  • 将文字放在中心位置

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

答案 2 :(得分:1)

您可以通过

防止方框跳跃
  1. 浮动li s
  2. width添加到li s
  3. 将左右padding添加到li s
  4. hover取消a并将其添加到li
  5. -

    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