我想将一个“网格”的元素集中在一起 – 当调整大小调整为中心时.
喜欢这个：
___________________ | | | [] [] [] [] | | [] [] [] [] | | [] [] [] | ------------------- ________________ | | | [] [] [] | | [] [] [] | | [] [] [] | | [] [] | ---------------- _____________ | | | [] [] | | [] [] | | [] [] | | [] [] | | [] [] | | [] | -------------
我已经尝试设置最大宽度,但是当调整大小时会导致此问题：
________________ | | | [] [] [] | | [] [] [] | | [] [] [] | | [] [] | ---------------- _____________ | | | [] [] | | [] [] | | [] [] | | [] [] | | [] [] | | [] | -------------
我不考虑使用媒体查询和设置硬宽度(甚至最大宽度)为每个配置一个真正的解决方案.
只要它优雅地降级,我开放给CSS3,并希望避免使用javascript.
编辑：添加非语义元素也是一个交易破坏者,一个容器div或一些可以通过,但不是理想的.
标注如下：
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
这是一个demo让你开始.
谢谢.
解决方法
对于您的确切要求,您仍然有一些模糊的内容(如上所述,所有上面的插图都显示了偶数个元素,所以我不知道你对奇数的期望,在你的小提琴中,我刚刚添加了一个text-align：中心到ul并实现了一个居中的效果(
http://jsfiddle.net/nR9Mk/1/),但我不知道它是否按照你的愿望行事.
更新：如果你只是处理数字,你希望他们按照两人分组,那么这将工作：http://jsfiddle.net/nR9Mk/8/.
第2轮：根据您所揭示的“奇数”要求,我提出了一个可行的解决方案.注意：1)它需要一些额外的HTML标记,2)你必须设置一些类型的实际限制,你想要走多远,仍然得到效果. Here是通过轮廓显示的“缓冲区”元素的代码,here是删除轮廓的.
第3轮：我知道你已经接受了我的答复,但是我已经在这个工作了,所以我想我会提供它.根据您的交易破产者评论,here is a modified plan可能对您(或其他人)有用.它是一种混合动物 – “有时”它推动剩下的元素(通常当它最不尴尬的时候),有时候让他们保持“离开”,但是居中.为了保持它从一开始看起来很简单的“奇怪”,它的最大宽度为六列宽.
