那天排遇到这样一个页面，每个logo紧挨着，而且两端对齐。尼玛，没招啊~
今天终于找到了解决办法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style> 6 ul { margin: 0px; padding: 0px; text-align: justify; font-size: 0px; /*hide whitespace between elements*/ 510px; } 7 ul li { display: inline-block; 100px; height: 100px; border: 1px solid red; } 8 ul:after { content: ''; display: inline-block; 100%; height: 0; } 9 </style> 10 </head> 11 <body> 12 <ul id="Grid"> 13 <li>1</li> 14 <li>2</li> 15 <li>3</li> 16 <li>4</li> 17 <li>5</li> 18 19 <li>6</li> 20 <li>7</li> 21 <li>8</li> 22 <li>9</li> 23 <li>10</li> 24 </ul> 25 </body> 26 </html>
主要有两个点：
1.不用浮动，用inline-block，但是使用inline-block，元素之间有间隔，用font-size:0px处理
2.两端对齐：使用text-align:justify。在其自然状态下，"text-align:justify"就不能工作，除非内容足够长并引起一个换行符。样式的最后一行解决该问题。
原文链接：http://www.w3cplus.com/css/text-align-justify-and-rwd.html
感谢大漠