相关疑难解决方法(0)

我使用HTML列表和CSS创建了一个水平菜单.除非您将鼠标悬停在链接上,否则一切都会正常工作.你看,我为链接创建了一个大胆的悬停状态,现在由于大胆的大小差异,菜单链接发生了变化.

我遇到与此SitePoint帖子相同的问题.但是,该帖子没有适当的解决方案.我到处寻找解决方案而找不到解决方案.当然,我不可能是唯一一个试图这样做的人.

有没有人有任何想法？

PS:我不知道菜单项中文本的宽度,所以我不能只设置li项的宽度.

这是我的代码:

HTML:

.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; }

CSS:

<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>

我想知道em单位是什么,以及转换为像素(px)时1em是多少.我还在某处读到了一些关于IE的bug,要克服哪些正文字体大小应该设置为某些东西,但不能跟随太多.有人可以详细解释一下吗？

我最近一直在研究很酷的设计。其中一项功能的工作原理是，当选中复选框时，其字体会变为粗体。问题是，在更改字体粗细时，它会稍微移动其他元素。任何如何在不定位的情况下防止它的想法都用绝对位置标记它。我创建了一个显示问题的截图。

li{
  list-style:none;
  display:inline-block;
  margin-right:20px
}

input[type="checkbox"]:checked + label{
font-weight:bold;
}

<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>