html - 如果元素有边距，如何计算每个元素的宽度百分比？

Question

在下面的示例中，我如何计算宽度的百分比，以便每个 li 元素都适合一行？我知道它不是 25%，因为我们必须考虑新的边距，那么我应该将它设置为什么？

HTML ( jsFiddle )

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100%;
}
li {
  display: inline-block;
  float: left;
  list-style: none;
  margin-right: 1.25em;
  width: 25%;
}
li:last-child {
  margin-right: 0;
}
img {
  width: 100px;
}

<div>
  <ul>
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
    <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
  </ul>
</div>

Answer 1

我觉得你的li应该是

li {
    display: inline-block;
    float: left;
    list-style: none;
    width: 25%;
}

删除 margin-right: 1.25em in li of css