Html 控制内联显示时的溢出

我试图在一个无序列表的任意一边都有按钮，而这个列表会溢出。然而，我在这方面花了很长时间，似乎不知道该怎么做

我的目标是在左边有一个按钮，右边有一个按钮，然后是中间的无序列表，overflow-x隐藏并可滚动

JSFiddle：

HTML/CSS：

按钮{
显示：内联；
浮动：左；
}
菜单{
填充：0；
显示：内联；
溢出-x：滚动；
空白：nowrap；
}
ul#菜单li{
显示：内联；
}
菜单a{
背景色：黑色；
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
}
菜单李a：悬停{
背景颜色：橙色；
}

水平列表
点击我！






















点击我

问题在于您正在将

#菜单

元素的

显示设置为
内联
。在这样做时，它将有一个数组，并考虑其子元素的大小。因此，没有滚动条（就像您在示例中看到的那样）

一个选项是将
菜单
元素的
显示
设置为
内联块
，然后在其上设置宽度。例如：



按钮{
显示：内联块；
垂直对齐：中间对齐；
}
菜单{
填充：0；
显示：内联块；
垂直对齐：中间对齐；
宽度：400px；
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
}
ul#菜单li{
显示：内联块；
}
菜单a{
背景色：黑色；
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
}
菜单李a：悬停{
背景色：橙色；
水平列表
点击我！






















点击我！
如果你用这件衣服替换你的风格，它可能会给你想要的：

ul#menu {
    padding: 0;
    display: inline-block;
    width: 300px;
    height: 45px;
    overflow-x: scroll;
    white-space: nowrap;
}

它将ul设置为显示为一个内联块并指定一个特定的宽度。否则，它想占据整个宽度，并在其上下颠簸按钮。如果它不是你想要的，也许它会给你新的想法。
确切的解决方案已经给出了…所以它必须是我的-1。