Html ul列表中li元素之间的CSS间距

我有一个ul列表，如下所示。我希望在所有视口（桌面/移动设备/桌子）中，每个li元素之间的空间相等。 我给了li内图标正确的填充，但当在其他分辨率（如手机）中看到时，这确实会中断。 在所有分辨率中，如何使li元素之间的理想间距相等

我希望li元素的水平列表在任何屏幕（台式机/手机/平板电脑）上居中对齐并等距排列

解决方案1。尝试使用viewport meta标记来告诉任何设备上的浏览器使用相同的测量值。它在所有设备上保持相同的纵横比

---

解决方案2。如果解决方案1不适用于您，请尝试css媒体查询，以便在移动和其他屏幕上设置正确的间距。

正如@Laif建议的，您可以尝试flexbox。Flex可以完全满足您的要求

请注意下面的代码。它有4个

li

内部

ul

并且我们在所有li之间有空间

在手机上，它看起来像

ul{
显示器：flex；
列表样式：无；
填充：0px；
证明内容：之间的空间；
}
李{
边框：1px纯灰；
填充物：5px10px；
}

项目1
项目2
项目3
项目4

试试这个： 在css中，您可以应用

*{
    margin: 0;
    padding: 0;
}
ul
{
    text-align: center;
}
ul li
{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
@media(max-width:340px)
{
  ul li
  {
      padding: 15px;
  }
}

---

您的li将以所有分辨率显示在屏幕中央

您能给出一个可复制的示例吗？您考虑过使用flexbox吗？这是为了你所描述的。