Question

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我认为你的李应该是

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

删除margin-right：css的li中的1.25em

Answer 2

clac()功能对于处理此问题非常方便：

li {
    display: inline-block;
    float: left;
    list-style: none;
    margin-right: 1.25em;
    width: calc(25%-.9375em);
}

因为我们只处理3个边距（3.75em）。我们将这四个元素分开，得到.9375em

jsfiddle

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

2 个答案: