CSS-HTML列表-在页面和中居中；左对齐项目

我有以下代码：

菜单{
保证金：自动；
填充：0；
列表样式类型：无；
}
.项目{
宽度：60px；
文本对齐：居中；
字号：4em；
背景色：红色；
显示：内联块；
保证金：5px；
填充：25px；
}

1
2
3
4
5
6
7
8
9
10

您也可以尝试以下flex box解决方案：

*{
保证金：0；
填充：0；
}
身体{
宽度：100vw；
高度：100vh；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.菜单{
位置：相对位置；
列表样式：无；
宽度：80vw；
显示器：flex；
柔性流：行换行；
证明内容：柔性端；
背景：绿色；
}
.项目{
宽度：15vw；
高度：15vw；
背景：红色；
利润率：1vw；
/*以下仅用于设置数字的样式*/
字体大小：25px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

1
2
3
4
5
6
7
8
9
10

试试这个：

.menu {
padding: 0;
list-style-type: none;
width: 500px; /* Change this value is you need more li in the same line. You can also use percents */
/*width: 90% */
display: block;
margin-right: auto;
margin-left: auto;
}
.item {
width: 60px;
text-align: center;
font-size: 4em;
background-color:red;
display: inline-block;
margin: 5px;
padding: 25px;
}

---

由于您将像素与.item一起使用，我认为这将最适合：

.menu {
  min-width: 300px;
  max-width: 90%;
  margin: auto;
  padding: auto;
  list-style-type: none;
}
.item {
  width: 60px;
  text-align: center;
  font-size: 4em;
  background-color: red;
  display: inline-block;
  margin: 5px;
  padding: 25px;
}

基本上，我只是添加了UL元素的测量值。

---

希望我能帮忙，祝你好运

我找到的唯一一个解决方案是：

ul.menu {
   margin: 0 auto;
   width: {x}px
}

---

并使用

@media

查询为不同的屏幕大小设置完美的宽度。

尝试使用display:flex在div（或其他任何内容）中环绕元素。页边距：auto属性仅适用于flex。

谢谢，但我需要容器（UL）居中，关于什么？

正文

？目前，我的

ul

占据了整个页面的宽度，但是请稍候，让我更新一下，谢谢！这正是我的意思。如果不手动设置宽度，则不应占用整个页面的宽度。再次感谢。我试图在不设置

宽度的情况下找到解决方案：80vw，因此每行显示尽可能多的项目将占用尽可能多的空间。