Css 将特定列表项居中

我有一个水平列表，每个项目都有相同的宽度。我正在使用

方向：rtl

使容器元素从右向左移动

我想要它，使中间（第二）项位于页面的中心。我的问题是，当组合LI的宽度大于用户屏幕宽度时，它没有正确对齐。e、 g.（切换CSS选项卡）

简而言之，我想让橙色块与紫色块对齐，但是当用户的屏幕宽度太小时，这会失败

有更好的方法吗

*{
填充：0；
保证金：0；
}
div{
框大小：边框框；
溢出：隐藏；
方向：rtl；
字号：0；
文本对齐：居中；
背景：黑色；
}
保险商实验室{
转换：转换。25秒易进易出；
空白：nowrap；
显示：块；
背景：黑色；
}
李{
显示：内联块；
框大小：边框框；
最小高度：500px；
垂直对齐：顶部；
宽度：500px；
}
李：第n种类型（1）{
背景：红色；
}
李：第n种类型（2）{
背景：橙色；
}
李：第n种类型（3）{
背景：黄色；
}
.测试{
位置：绝对位置；
排名：0；
显示：块；
宽度：100%；
}
.测试>跨度{
显示：块；
宽度：500px；
背景：紫色；
高度：200px；
保证金：0自动；
}

将LI上的宽度规则更改为：

33.33%

而不是500px

以下是一个例子：

---

我假设这就是您的意思？

您也可以使用CSS flex属性

显示：flex和
flex-grow:1在李的

以下是一个例子：
窗口/html的宽度可以小于ul宽度。为了避免这种情况，您可以重置html上的显示，使其比窗口更宽，然后使用coordonates设置绝对元素的位置：


/*CSS更新*/
html{
显示：表格；
宽度：100%；
位置：相对位置；
}
.测试{
位置：绝对位置；
排名：0；
左：0；
右：0；
显示：块；
宽度：100%；
}
/*结束更新*/
.测试>跨度{
显示：块；
宽度：500px；
背景：紫色；
高度：200px；
保证金：0自动；
}
* {
填充：0；
保证金：0；
}
div{
框大小：边框框；
溢出：隐藏；
方向：rtl；
字号：0；
文本对齐：居中；
背景：黑色；
}
保险商实验室{
转换：转换。25秒易进易出；
空白：nowrap；
显示：块；
背景：黑色；
}
李{
显示：内联块；
框大小：边框框；
最小高度：500px；
垂直对齐：顶部；
宽度：500px；
}
李：第n种类型（1）{
背景：红色；
}
李：第n种类型（2）{
背景：橙色；
}
李：第n种类型（3）{
背景：黄色；
}






否。我将动态添加李的项目，但首先只有3个。请检查我的其他答案：）