Html 使菜单与框大小一起使用：边框框

我有一个菜单，当鼠标位于图标上方时，标签会出现：

<ul>
  <li>
    <a href="#">
      <i class="fa fa-home"></i>
      <span>One</span>
    </a>
  </li>
</ul>

它停止工作了。问题是在我的网站CSS中，我正在使用

边框框

有没有一种方法可以让CSS与

边框框

的结果在同一个菜单中

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.包装纸{
边框：1px纯红；
填充：0；
保证金：0；
溢出：隐藏；
}
.导航{
浮动：左；
宽度：40px；
}
.内容{
浮动：左；
宽度：200px；
}
ul{
列表样式：无；
填充：0；
保证金：0；
}
a{
背景色：#D0；
颜色：黑色；
显示：内联块；
填充：12px；
文字装饰：无；
}
a:悬停{
背景色：黑色；
颜色：白色；
宽度：100%
}
a:悬停跨度{
显示：内联块；
垂直对齐：顶部；
宽度：0；
}
跨度{
显示：无；
}

这就是内容

鼠标悬停时，图标的范围应位于内容上方

只要在

标签中应用这个，一切都会好起来的。在此之后，可以在所有图元上使用边框框

a:hover {
  background-color: black;
  color: white;
  width:100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

我认为以下方法应该有效：

* {
 box-sizing: inherit;
  }

您可以做到这一点，但仍然保持
框大小：边框框在所有元素上


移除
a:hover
和
a:hover span
上的
width
。添加
空白：nowrap和
位置：相对
到
a
更改导航a到
框大小：内容框
，给它
z-index:1
，使它显示在顶部，添加
空白：nowrap
，并删除
a:hover
和
a:hover span
上的宽度。以下是一个完整的工作解决方案：


*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.导航a{
位置：相对位置；
z指数：1；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
空白：nowrap；
}
.包装纸{
边框：1px纯红；
填充：0；
保证金：0；
溢出：隐藏；
}
.导航{
浮动：左；
宽度：40px；
}
.内容{
浮动：左；
宽度：200px；
}
ul{
列表样式：无；
填充：0；
保证金：0；
}
a{
背景色：#D0；
颜色：黑色；
显示：内联块；
填充：12px；
文字装饰：无；
}
a:悬停{
背景色：黑色；
颜色：白色；
}
a:悬停跨度{
显示：内联块；
垂直对齐：顶部；
}
跨度{
显示：无；
}







这就是内容

鼠标悬停时，图标的范围应位于内容上方
我建议这样做，请参阅内联注释

a {
    white-space: nowrap; /*icon and text on the same line*/
    position: relative; /*menu stays on top of content area*/
}
a span {
    display: none;
}
a:hover span {
    display: inline-block;
    vertical-align: top;
}

并查看更新的完整代码片段


*{
框大小：边框框；
}
.包装纸{
边框：1px纯红；
填充：0；
保证金：0；
溢出：隐藏；
}
.导航{
浮动：左；
宽度：40px；
}
.内容{
浮动：左；
宽度：200px；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
a{
背景色：#D0；
颜色：黑色；
显示：内联块；
填充：12px；
文字装饰：无；
空白：nowrap；/*已添加*/
位置：相对；/*已添加*/
}
a:悬停{
背景色：黑色；
颜色：白色；
}
跨度{
显示：无；
}
a:悬停跨度{
显示：内联块；
垂直对齐：顶部；
}





这是内容

鼠标悬停时，图标的范围应位于内容上方
不太。。。当我增加垃圾邮件中的文本时，它会显示在许多行中。检查更新的示例：是的，我不知道您想在该范围内添加更多文本，sryIt不能解决所有问题。第二项上的文本变成两行。。。我只想在一行中显示尝试删除此CSS元素中的宽度：
a:hover span
它几乎可以工作，但菜单项的文本显示在内容文本下。为什么？检查这里：…我已经更新了答案，添加了一个额外的属性（
位置：relative；
），以确保锚（
a
）覆盖了内容@Miguelca你能把你的内容变成红色吗？我认为它超出了菜单项文本。@Miguel编辑以显示内容文本实际上显示在菜单项文本下方。如果您的问题得到了回答，请不要忘记使用向上箭头将一些答案标记为有用，然后使用复选标记选择一个可接受的答案！
a {
    white-space: nowrap; /*icon and text on the same line*/
    position: relative; /*menu stays on top of content area*/
}
a span {
    display: none;
}
a:hover span {
    display: inline-block;
    vertical-align: top;
}