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>

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

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

PS

由于需要保持列的对齐方式

ul {
  text-align: center;
}

li {
  display: inline;
}

不合适。

所有可能分辨率的媒体查询也不适用。

感谢帮助

将浮点div居中对齐，但最后一行未对齐

0 个答案: