Css 水平菜单项跨越容器的宽度

我已经搜索了这个问题，但在这里什么地方都找不到

有9个菜单项的水平列表，容器的宽度为1200px

目前，每个菜单项（除最后一个菜单项外）上都有一个右边距，用于将其隔开，但无论屏幕/浏览器的宽度如何，菜单项都需要从左到右延伸。即使在最小化浏览器时使用媒体查询来减少右边距，它仍会执行以下操作：

• 在列表右侧留下一个小间隙
• 将最后一个菜单项推到下一行

这是JQuery解决方案吗

.menu           {width: 1200px; margin: 0 auto;}
.menu li        {display: inline-block; margin: 0 0 0 36.7px; position: relative;}
.menu li:nth-of-type(1) {margin: 0;}

---

尝试

display:flex

。下面是一个例子

菜单{
宽度：1200px；
边际：0px；
填充：0px；
背景颜色：淡绿色；
显示器：flex；
弯曲方向：行；
}
李先生{
列表样式：无；
弹性：1；
背景颜色：橙色；
边框：1px纯绿色；
}

一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本
一些文本

您可以使用百分比宽度和百分比边距。假设我们希望每个项目有

0.5%的右边距。有8个项目需要保证金；所以8x0.5等于4%。因此，4%是保留的保证金，但在此之后，我们仍然有96%的发挥。因此，将96%除以9个项目，每个项目的make
10.66%


菜单{
宽度：1200px；
保证金：0自动；
列表样式：无；
}
李先生{
浮动：左；
宽度：10.66%；
右边距：0.5%；
位置：相对位置；
背景：#333；
颜色：#fff；
文本对齐：居中；
}
.菜单李{
保证金：0；
}

一,
二,
三,
四,
五,
六,
七,
八,
9
尝试
显示：flex
。请发布您的HTML或创建一个jsfiddleRelated-不太相关，因为我不希望任何内容居中，我希望第一个单词的左边缘位于容器的左边缘，最后一个单词的右边缘位于容器的右边缘。谢谢，我在ul中添加了flex，flied grow:1代表所有li，flex grow:0代表li:最后一个孩子，因此列表是边对边的，效果不错。