css - 在移动设备中居中 ul li [重复]答案

【问题标题】：css - centering ul li in mobile [duplicate]css - 在移动设备中居中 ul li [重复]
【发布时间】：2022-02-13 15:59:52
【问题描述】：

我想把 li 放在 ul 的中心。它看起来居中，但稍微不居中。左部分和右部分并不完全相同。

我该如何解决这个问题？

.test-box {
  border: 1px solid blue;
}

.test-ul {
  text-align: center;
  list-style-type: none;
  border: 1px solid red;
}

.test-li {
  display: inline-block;
  border: 1px solid green;
}

<div class="test-box">
  <ul class="test-ul">
    <li class="test-li">real time</li>
    <li class="test-li">real time</li>
  </ul>
</div>

【问题讨论】：

只需从浏览器默认提供的.test-ul 中删除 padding-left。
浏览器为网页设置了一些默认样式，只是为了确保页面看起来不错，即使开发人员没有给它任何样式，或者样式没有正确加载。撤消所有浏览器样式的一种流行方法是使用CSS reset。
Massive duplicate

标签： html css

【解决方案1】：

<ul> 元素默认有左填充。

.test-ul
{
    padding-left: 0;
}

.test-box {
  border: 1px solid blue;
}

.test-ul {
  text-align: center;
  list-style-type: none;
  border: 1px solid red;
  padding-left: 0;
}

.test-li {
  display: inline-block;
  border: 1px solid green;
}

<div class="test-box">
  <ul class="test-ul">
    <li class="test-li">real time</li>
    <li class="test-li">real time</li>
  </ul>
</div>

对

【讨论】：

打败我吧.. 但无论如何都是骗子
@mplungjan 我不擅长英语.. 你的意思是这不是合法的方式吗？
这是合法的，但 StackOverflow 上已经有 hundreds of identical questions and answers