Javascript 如何修复通知框插入符号？

我已经使用引导下拉菜单创建了一个消息通知。如果你看到我添加了一个插入符号来表示插入符号现在属于消息图标，当我正常检查包括响应设计时，插入符号会从消息通知图标移开

我希望插入符号在任何设计（包括移动设备）中都固定在消息图标下

有人能帮我解决这个问题吗

注：我尝试添加正确的引导文件，但似乎我无法添加它们，这就是为什么我要留下JS fiddle链接

。上封头{
边框底部：1px实心rgba（0,0,0,0.12）；
背景：#FFFFFF；
宽度：100%；
浮动：左；
高度：50px；
}
.上封头h1{
颜色：#fff；
字号：26px；
字号：600；
线高：50px；
边缘底部：0px；
}
.右上方菜单{
浮动：对；
}
.顶部标题.用户栏{
文本对齐：右对齐；
浮动：对；
}
.顶部标题.用户栏a{
颜色：rgba（0,0,0,7）；
字体大小：15px；
字体大小：400；
线高：49px；
位置：相对位置；
填充：0 7px；
}
.顶部标题.用户栏a:悬停{
颜色：#02b875；
}
.顶部标题.用户栏a i{
右边距：6px；
}
.顶部标题.用户栏.ping{
背景：#02b875；
边界半径：50%；
高度：10px；
位置：绝对位置；
右：9px；
顶部：13px；
宽度：10px；
z指数：1；
}
.顶部头部.用户栏img{
浮动：左；
高度：32px；
宽度：32px；
边缘顶部：9px；
}
/*下拉菜单*/
.dropbtn{
颜色：rgba（0,0,0,7）；
填充：13px 7px；
字体大小：15px；
边界：无；
边际上限：0px；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#fff；
最小宽度：180px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：999；
浮动：左；
文本对齐：左对齐；
}
.下拉内容a{
文字装饰：无；
显示：块；
填充：10px 25px 10px 15px！重要；
线高：1.42857！重要；
}
.下拉列表内容a：悬停{
颜色：#02b875；
文字装饰：无；
背景色：#f1f1；
}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#fff；
颜色：#02b875；
}
.下拉分频器{
身高：0；
边际：0px；
溢出：隐藏；
边框顶部：1px实心#e9ecef；
}
.下拉菜单箭头{
顶部：-25px；
左：27.2%；
宽度：0；
身高：0；
位置：相对位置；
}
.下拉菜单箭头：之前，
.下拉菜单箭头：之后{
内容：“；
位置：绝对位置；
显示：块；
宽度：0；
身高：0；
边框宽度：11px 12px；
边框样式：实心；
边框颜色：透明；
z指数：1001；
}
.下拉菜单箭头：之后{
底部：-17px；
右：-8px；
边框底色：#fff；
}
.下拉菜单箭头：之前{
底部：-16px；
右：-8px；
边框底色：rgba（0,0,0,15）；
}
/*=============导航开始===================*/
.帐户名{
字号：600；
}
/*通知*/
.通知{
颜色：rgba（0,0,0,7）！重要；
字体大小：17px！重要；
}
。通知：悬停，
。讯息：悬停{
颜色：#183247；
}
.通知imp{
字号：600；
颜色：#1d2129；
}
.留言{
颜色：rgba（0,0,0,7）！重要；
字体大小：17px！重要；
左边距：-5px！重要；
}
/*消息投递箱*/
.留言框{
最小宽度：430px；
背景色：#fff；
垫底：0px；
边界半径：0px；
边框：1px实心#e2！重要；
位置：绝对！重要；
左边距：-99px；
顶部：-1px！重要；
z指数：1001；
}
/*消息标题*/
.消息框.消息标题{
边框底部：1px实心#E2；
填充：0px 15px 8px 15px；
字体大小：13px；
}
/*消息通知*/
.noti{
字号：600；
}
/*消息内容*/
.消息框.消息框内容{
最小高度：380px；
最大高度：280px；
溢出y：滚动；
z指数：1001；
}
/*消息图像容器*/
.msg框内容.msg img{
浮动：左；
显示：内联块；
宽度：55px；
高度：45px；
保证金：0px 0px 8px 0px；
}
/*信息图像*/
.msg框内容.msg img img{
宽度：40px；
高度：40px；
}
.消息框.消息框内容a{
显示：块；
字体大小：13px；
字号：600；
填充顶部：10px；
垫底：5px；
右边填充：17px；
左侧填充：0px；
行高：继承；
边框底部：1px实心#E2；
}
.消息框.消息框内容a:悬停{
颜色：rgb（0,0,0,7）；
背景色：#fafafa；
文字装饰：无；
}
.message box.msg box content.pd-l0{
左侧填充：0px；
}
/*消息框滚动条隐藏*/
.message box.msg box内容：--webkit滚动条，
.message box.msg box内容：--webkit滚动条拇指{
显示：无；
}
.消息框.消息框内容p{
字体大小：13px；
颜色：#1d2129；
字体大小：正常；
保证金：1px 0px 8px 0px；
}
.message box.msg box content p.time{
字体大小：12px；
字号：600；
保证金：0px-55px 0px 0px；
位置：相对位置；
显示：内联块；
颜色：#90949c；
}
/*未读通知*/
.message box.msg box content>a:n子项（2n+0）{
背景色：#fafafa；
}

信息（4）

大多数HTML开发人员都有这个问题，但解决方案非常简单，您不需要在隐藏的容器中添加箭头图标。您应该在单击/悬停的按钮底部添加箭头图标。它不会干扰用户界面。我只是对你的代码进行了一些修改，希望能对你有所帮助。谢谢

---

• [html]相关文章推荐

---

• 随机文章推荐