html – 保持文本对齐的中心内联块

2023年11月24日 165次阅读

我有一组物品.是否可以将整个组居中,但确保新线上的项目出现在左侧而不是中心？

这是一个例子：http://codepen.io/anon/pen/yczku/

这就是我需要的：http://f.cl.ly/items/103O0n0h2N0n1k163E26/result.png

请注意,绿色单元格组位于红色容器内部,但每个新行仍然是左对齐的.

我应该提一下,解决方案不能依赖于固定的宽度(并设置固定的填充或类似的东西).我在示例中使用容器上的静态宽度,以确保它在所有屏幕上显示相同的大小.在我的最终项目中,这个结构具有动态宽度.

我知道使用JavaScript / jQuery可以实现我所需要的,但我感兴趣的是是否存在仅支持CSS的解决方案.

编辑：

示例中的每个绿色单元都具有静态宽度,但作为一组,它们应该填充整个可用空间.因此,如果容器变宽,则第一行中可容纳3个以上的项目,反之亦然 – 如果容器变窄,则每行只能容纳2个或1个项目.

最佳答案 如果你向ul容器添加正确的边距或填充,它应该没问题：

http://codepen.io/anon/pen/Drtoa/

* {
  margin: 0;
  padding: 0;
}

.container {
  border: 5px solid red;
  width: 800px; /* Will be dynamic! */
  margin: 0 auto;
}

ul {
  margin:0 100px;
}

li {
  border: 5px solid green;
  width: 200px;
  height: 200px;
  display: inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
点赞