html - 我有负边距，父 div 有更多宽度，但图片不能以正确的方式

Question

it works, I increase the parent box's width

但是最后一张图还是没有升起。

我要图片在同一行 See the image that I want

这是我的 HTML 代码。

<div class="main-show">
    <ul>
        <li><img src="./images/pic_1.jpg" alt=""></li>
        <li><img src="./images/pic_2.jpg" alt=""></li>
        <li><img src="./images/pic_3.jpg" alt=""></li>
        <li><img src="./images/pic_4.jpg" alt=""></li>
        <li><img src="./images/pic_5.jpg" alt=""></li>
    </ul>
</div>

和CSS代码

.main-show{
    width: 100%;
}
.main-show ul{
    margin-right: -25px;
    overflow:hidden;
}
.main-show li{
    float: left;
    width: 20%;
    margin-right: 5px;
}
.main-show img{
    width: 100%;
    float: left;
}

Answer 1

您可以使用 CSS calc() function要计算 li 元素的适当宽度，在您的情况下，将 20% 减少 5px 边距:

width: calc(20% - 5px);

旁注:您不需要在 img 上 float ，因为您已经在 float li 元素。

更新:如果你想删除最后一个右边距，你应该使用选择器 li:last-child 并设置 margin-right: 0;。现在您必须使用 width: calc(20% - 4px); 因为缺少最后 5px。

body {
  background: black;
}
.main-show {
  width: 100%;
  background: white;
}
.main-show ul {
  padding-left: 0;
  overflow: hidden;
  list-style-type: none;
}
.main-show li {
  float: left;
  width: calc(20% - 4px);
  margin-right: 5px;
}
.main-show li:last-child {
  margin-right: 0;
}
.main-show img {
  width: 100%;
}

<div class="main-show">
  <ul>
    <li>
      <img src="http://placehold.it/200" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200" alt="">
    </li>
    <li>
      <img src="http://placehold.it/200" alt="">
    </li>
  </ul>
</div>