Css 防止水平导航内容溢出到填充中

我在水平导航栏上放置了一个右箭头按钮，单击该按钮时，如果内容溢出，将使用JavaScript滚动到菜单的末尾。此箭头位于导航栏右侧固定的div中，当前遮挡最后一个链接的末端。我原以为在导航容器中添加一点填充可以解决问题，但事实并非如此，链接只是溢出到填充中

这里是突出显示了容器填充的链接，在这里我给了

.Dashboard\uuuuu sub-header\uuu菜单一个60px的右填充：


我创建了一个模型来尝试复制这个问题


函数buildHorizontalScrollArrow（）{
var el=jQuery（“”{
类：“水平滚动箭头容器”
})
var el2=jQuery（“”{
类：“水平滚动箭头”，
文本：'>'
})
返回$（元素）.append（el2）；
}
函数addHorizontalScrollArrow（元素）{
var el=document.getElementsByClassName（el）[0]；
var存在；
如果（$（'.水平滚动箭头'）。长度）{
arrowsists=true；
}否则{
arrowsists=false；
}
如果（标高偏移网络宽度<标高滚动宽度）{
如果（箭头存在==false）{
$（el）.append（buildHorizontalScrollArrow（））
}
}否则{
如果（箭头存在==true）{
$（'.水平滚动箭头'）.remove（）；
}
}
}
$（文档）.ready（函数（）{
addHorizontalScrollArrow（“仪表板子标题菜单”）；
$（窗口）.on（'resize'，function（））{
addHorizontalScrollArrow（“仪表板子标题菜单”）；
})
$（文档）.on（'单击'，'）。水平滚动箭头'，函数（）{
$（“.Dashboard\uuuu子标题\uuuuu菜单”）。向左滚动（1200）；
})
});
。仪表板\子标题\菜单{
宽度：计算（100%-60px）；
高度：90px；
背景：#FFF；
显示器：flex；
调整内容：灵活启动；
对齐项目：柔性端；
填充：0 3em 0 3em；
盒影：02px2px0RGBA（0,0,0,0.04），01px5px0RGBA（0,0,0,0.02）；
溢出-x：自动；
位置：固定；
边界：0；
垂直对齐：基线；
字体系列：“无衬线”，无衬线；
字体大小：12px；
框大小：边框框；
}
.仪表板\子标题\菜单li{
填充：0.1.4em；
高度：35px；
线高：30px；
光标：指针；
列表样式：无；
字母间距：0.02em；
颜色：#999；
文字装饰：无；
空白：nowrap；
}
.仪表板\子标题\菜单li a{
光标：指针；
列表样式：无；
字母间距：0.02em；
颜色：#999；
文字装饰：无；
空白：nowrap；
}
.水平滚动箭头容器{
位置：固定；
宽度：计算（100%-60px）；
高度：40px；
左：0；
框大小：边框框；
左边距：9px；/*这只是为了提琴*/
}
.水平滚动箭头{
位置：绝对位置；
右：0；
底部：0；
高度：40px；
宽度：30px；
背景色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字号：2em；
左边框：2倍实心rgba（0,0,0,0.05）；
光标：指针；
框大小：边框框；
}

















就我个人而言，我会这样做。假设我完全理解你在这里想要实现的目标


部分{
位置：相对位置；
右侧填充：15px；
}
.仪表板\子标题\菜单{
宽度：计算（100%-60px）；
高度：90px；
显示器：flex；
调整内容：灵活启动；
对齐项目：柔性端；
填充：0.3em；
溢出-x：自动；
}
.仪表板\子标题\菜单li{
填充：0.1.4em；
高度：35px；
线高：30px；
空白：nowrap；
}
.水平滚动箭头容器{
位置：固定；
宽度：100%；
高度：40px；
左：0；
}
.水平滚动箭头{
位置：绝对位置；
右：0；
底部：0；
高度：40px；
宽度：30px；
背景色：#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字号：2em；
左边框：2倍实心rgba（0,0,0,0.05）；
光标：指针；
}



















我看不到
菜单上定义的任何右边填充。Dashboard\uuuu sub-header\uuuu菜单
@Red我在Chrome inspector中这样做是为了拍摄第二个屏幕截图并证明它没有work@Obsidian谢谢，更正。嗯，你应该在重现问题的地方贴一把小提琴。我看不出当前小提琴的错误。如果没有它，我们很可能无法帮助您。@Red Ok我添加了一个提琴，我认为它只是复制了这个问题，请告诉我您的想法。谢谢您的回答，但这有几个问题，例如部分需要固定位置（应该提到，抱歉）。如果你想看的话，我添加了一个jsfiddle。所以把它修好吧！它没有改变任何事情。好吧，我已经试着玩了一段时间，但无论我做什么链接仍然进入填充！据我所知，您将类放在ul元素上而不是节上（我不知道为什么现在没有，顺便说一下，我没有编写此代码），相对地定位节，并在节上设置填充。我错过什么了吗？