元素的中心流体网格没有在父级上设置硬宽度

Question

我想把一个元素的"网格"居中 - 当调整大小时 - 调整到中心本身.

像这样:

 ___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

我已经尝试设置了一个max-width,但是在调整大小时会导致这个问题:

 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

我不考虑使用媒体查询并为每个配置设置一个真正的解决方案widths(甚至max-widths).

我对CSS3持开放态度,只要它优雅地降级,并且想避免使用javascript.

编辑:添加非语义元素也是一个交易破坏者,容器div或其他东西可以通过但不理想.

标记应如下:

 <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

这是一个让你入门的演示.

谢谢.

Answer 1

关于你对中心的确切要求仍然有点模糊(因为,上面的所有插图都显示了偶数个元素,所以我不知道你对奇数的期望.在你的小提琴中,我刚添加了一个text-align: center到了ul并取得了中心效应(http://jsfiddle.net/nR9Mk/1/),但我不知道它是否按照你的意愿行事.

更新:如果您只处理偶数,并希望它们按两个分组,那么这将起作用:http://jsfiddle.net/nR9Mk/8/.

第2轮:根据您显示的"奇数"要求,我提出了一个有效的解决方案.注:1)它确实需要一些额外的HTML标记,2)你必须设置为你想要多宽去,仍然可以得到的效果某种类型的实际限制.这里是由揭示了"缓冲"元素的代码outline,并在这里是它移除了轮廓.

第3轮:我知道你已经接受了我的答案,但我已经在研究这个问题了,所以无论如何我想我会提供它.根据您的交易破坏者评论,这是一个修改后的计划,可能对您(或其他人)有用.它是一种混合- "有时"它推动离开元素(通常当它是最尴尬的不是),有时让他们留下来"关列",但中心.为了防止它看起来简单"奇怪",它被赋予max-width六列宽.