Html 使用绝对位置悬停时工具提示的灵活宽度

下面是我的基本代码。（

.iconWrap

在真实场景中隐藏。它在

li

的悬停位置可见。未添加悬停代码。）

需要具有灵活宽度的

.iconWrap

。这样它就可以根据里面的图标数量来调整它的宽度。目前我已经给出了

宽度：150px至
.iconWrap

如果移除
宽度：150px图标一个比一个低。我想要的是

如果有一个图标，则宽度应仅为适合一个图标的宽度，并根据图标的数量增加

如果有超过5个图标，则第6个图标应位于第一个图标下方


*{
保证金：0；
填充：0
}
.导航{
文本对齐：右对齐；
}
.nav>li{
显示：内联块；
位置：相对位置；
}
.nav>li>a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#222；
}
.nav>li>a:悬停{
背景：#ccc；
}
.iconWrap{
位置：绝对位置；
填充：10px；
背景：#ccc；
边框：1px实心#000；
宽度：150px；
右：0；
}
.我喜欢吃{
显示：内联块；
}
.i.i{
显示：块；
高度：20px；
宽度：20px；
背景：#000
}








使用
换行：打断单词.iconWrap


*{
保证金：0；
填充：0
}
.nav>li{
显示：内联块；
位置：相对位置；
}
.nav>li>a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#222；
}
.nav>li>a:悬停{
背景：#ccc；
}
.iconWrap{
单词包装：打断单词；
位置：绝对位置；
填充：10px；
背景：#ccc；
边框：1px实心#000；
宽度：120px；
}
.我喜欢吃{
显示：内联块；
}
.i.i{
显示：块；
高度：20px；
宽度：20px；
背景：#000
}








试试这个


*{
保证金：0；
填充：0
}
.nav>li{
位置：相对位置；
显示：内联块；
}
.nav>li>a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#222；
}
.nav>li>a:悬停{
背景：#ccc；
}
.iconWrap{
位置：绝对位置；
填充：10px；
背景：#ccc；
边框：1px实心#000；
空白：nowrap；
}
.我喜欢吃{
显示：内联块；
}
.i.i{
显示：块；
高度：20px；
宽度：20px；
背景：#000
}
/****右菜单**/
.右菜单{
边缘顶部：50px；
}
.右菜单.导航{
文本对齐：右对齐；
}
.右菜单.iconWrap{
右：0；
}















在
最大宽度：120px上添加
最大宽度
图标
更改
位置
至
。导航
删除至
li


*{
保证金：0；
填充：0
}
.导航{
位置：相对；}
.nav>li{
显示：内联块；
}
.nav>li>a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#222；
}
.nav>li>a:悬停{
背景：#ccc；
}
.iconWrap{
位置：绝对位置；
填充：10px；
背景：#ccc；
边框：1px实心#000；
最大宽度：120px；
}
.我喜欢吃{
显示：内联块；
}
.i.i{
显示：块；
高度：20px；
宽度：20px；
背景：#000
}








Display flex就可以了，只需在CSS中添加两行代码，如下所示：


*{
保证金：0；
填充：0
}
.导航{
文本对齐：右对齐；
}
.nav>li{
显示：内联块；
位置：相对位置；
}
.nav>li>a{
显示：块；
填充：10px；
文字装饰：无；
颜色：#222；
}
.nav>li>a:悬停{
背景：#ccc；
}
.iconWrap{
位置：绝对位置；
填充：10px；
背景：#ccc；
边框：1px实心#000；
显示：flex；/*已添加*/
宽度：145px；/*已添加*/
柔性包裹：包裹；/*已添加*/
右：0；
}
.我喜欢吃{
边距：2px；/*已添加*/
显示：内联块；
}
.i.i{
显示：块；
高度：20px；
宽度：20px；
背景：#000
}








.iconWrap{空格：nowrap}
空格：nowrap失败，因为第六个图标的第二个条件应低于1st@dipikapatil这个条件在我的回答中是满足的。你可以查一下。@ankitapatel谢谢你的帮助。但现在的问题是.iconWrap有left:auto和right:0，它们获取相对于的位置UL@dipikapatil你能提供你想要的截图吗？这不起作用。第二个条件“第六个图标应低于第一个图标”失败，现在第一个条件失败。你不能用宽度来实现这一点。这在第1种情况下效果很好，但在第2种情况下失败。第6个图标应低于第1个icons@dipikapatil您可能需要固定高度，并在写入
display:flex
属性的容器中设置
flex-wrap:wrap
。@dipikapatil了解更多信息flexbox@dipikapatil如果你真的想学，有时间，Flexbox对于很多用例来说都非常方便，所以最好尽可能多地学习它。当图标小于4时，它不会调整宽度。这在第1种情况下效果很好，但在第2种情况下失败。第六图标