Css 具有不同宽度的水平列表项

在顶部的栏中，绿色和红色的“li”区域的宽度如何为3em？我尝试了代码中的css，但所有3个列表项的宽度保持相同

它将显示在移动应用程序网络视图中

多谢各位

ul{
文本对齐：居中；
}
李{
高度：2米；
线高：2米；
}
menuIconLeft先生{
宽度：3em；
背景颜色：绿色；
}
menuIconRight先生{
宽度：3em；
背景色：红色；
}

存款准备金率


☰


活动标签


⋮



Lorem ipsum dolor sit amet，奉献精英。Eligendi，Temperibus，dolore！多洛里布（Doloribus）认为，除了理性上的非理性之外，所有人都必须遵守自然法则，才能成为精英。驱避剂是在液体中的一种物质，是在液体中的一种物质，是在液体中的一种物质。暂时性自慰练习：假设！Lorem ipsum dolor sit amet，奉献精英。最大发光体实验室。可选择的颜色如下所示。这项活动的内容包括以下内容：知识产权和知识产权。对于暂时性的解决方案，无需特别注意，无需特别注意。这是什么罪过？



不


额外的


对

要在需要查找的地方坚持结果，请执行以下操作：

将列表项显示属性设置为

display:inline block

将无序列表设置为

列表样式类型：none

，以便列表项项目符号不显示

将左列表元素和右列表元素分别设置为

float:left

和

float:right

，这非常有帮助，因为左列表元素和右列表元素将居中对齐（由于

ul{text align:center}

），因此除非您告诉它们，否则它们不会左右对齐

我向中间的列表元素添加了一个新类

menuIconCenter

。这适用于

宽度的宽度：calc（100%-6em），因为左列表元素和右列表元素的宽度各为3em，所以将这两个宽度减去100%将得到中间列表元素的剩余宽度。
“如何使绿色和红色“li”区域的宽度为3em？”

添加了

页眉

和

页脚

类，以帮助区分页脚和页眉部分的工作方式。这是一个重要的架构变化，你能告诉我为什么吗

添加了

以加粗页脚中的文本

建议：如果要使这些列表元素可单击或像按钮一样工作，请执行以下操作（这是伪代码！）：

☰


活动标签


⋮



Lorem ipsum dolor sit amet，奉献精英。Eligendi，Temperibus，dolore！Doloribus，在驱避剂必须是天然药物的情况下，假定除同一种知识的合理使用权以外的其他性能缺陷
多洛·西特·艾米特，奉献给精英们。驱避剂是在液体中的一种物质，是在液体中的一种物质，是在液体中的一种物质。暂时性自慰练习：假设！洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
再见。最大发光体实验室。可选择的颜色如下所示。无需提供解决方案，请选择适当的药物。此项活动的内容应包括以下内容：
精英。对于暂时性的解决方案，无需特别注意，无需特别注意。这是什么罪过？



不


额外的


对

我需要中间li来扩展并占据屏幕宽度的其余部分，但此解决方案也修复了中间li。单击“运行代码片段”按钮并没有给出我想要的内容（红色和绿色li宽度3em，中间li占据屏幕宽度的其余部分），加上它使底部li不在同一水平线上，但降低了中间li。我在使用safari。@FredJ。感谢您的澄清，我修改了答案，以处理如何使用移动列表样式类型：无；从class.center到css文件中的选择器ul，我希望您的意思是：）。另外，当我将代码复制到我的项目中时。它不应用大小更改，但仍与以前一样。@FredJ。确保您的项目没有覆盖我在代码段上应用的CSS规则，很可能就是这样。如果您复制我的代码段时没有

<li>
    <a href="some URL">Something here</a>
</li>

li > a {
    display: block;
    width: 100%;
}