css - 将浮动 div 对齐到中心但最后不是向左整行

Question

我有浮动项目的列表

ul {
  height: 204px;
  border: 1px solid #f0f;
  margin: 10px;
  padding: 0;
}

ul:nth-child(1) {
  width: 299px;
}

ul:nth-child(2) {
  width: 399px;
}

li {
 display: block;
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #000;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> 
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> 
</ul>

问题是在某些显示分辨率上，右侧最多有 100 像素的空白空间。

我需要一些解决方案，将边距划分为相同的部分（左侧 50 像素，右侧 50 像素）但保留列，因此在第二次中ul应该li完全保持在第一次之下。

附言

因为需要保持列的对齐

ul {
  text-align: center;
}

li {
  display: inline;
}

不适合。

所有可能的解决方案的媒体查询也不适合。

感谢帮助

标签： css