将李的行放入行中

Question

我有一长串的李。

<ul>
  <li>
   <img src="test.jpg">
  </li>
  <li>
   <img src="test.jpg">
  </li>
  //etc

每个李都有这种风格：

width: 10%;
display: inline-block;
vertical-align: middle;

当我连续超过10个li时，它们会进入下一行。

这是正确的方法吗？或者我应该将每个10 li包裹成破坏线的东西？什么是最好/正确的方法？我没有选择这种方法，因为很容易从数据库中循环出数据。

Answer 1

这是一种非常有效的方法，非常容易改变。假设你实际上决定了，你想要五行。只需将10%更改为20%和ta-da！立即完成。

请注意，如果您的<li>元素之间有空格，则空格可能会成为一个问题（但如果您正确缩小HTML，则不应该出现此问题。）

另一点，使用LESS等高级语言生成CSS可能更有意义。在LESS，您可以这样做：

width: (100% / 10);

这将计算您的百分比，10是您想要的每行数。现在已经很简单的事情变得更加容易了（特别是如果你想要的话，比如7个就行了）。 CSS calc(100% / 10)也可以这样做，但它与旧浏览器不兼容。

Answer 2

应该创建一个包含表属性的div列表。像这样DEMO

.table{
    display:table;
    margin:0;
    padding:0;
}
.cell{
    margin:0;
    display:table-cell;
}
img{
    max-width:100%;
}