如何在没有左边和右边的内容中居中<ul> <li>右边距

Question

如何在没有左边和右边的情况下将ul li放在内容中心右边距。 看看我有什么以及我需要做什么：

show image

我必须删除右边距。如何在没有左右边距的情况下删除边距和中心li元素？

有代码：

.content {width:940px;background:gray;}
.content ul {width:100%;padding:0;margin:0;}
.content ul li{width:200px;display:inline-block;margin-right: 30px;}
.content ul li span{display: block;height: 120px;overflow: hidden;}
.content ul li span img{width:100%;}

<div class="content">
    <ul>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
        <li>
            <a href="/">
                <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
            </a>
        </li>
    </ul>
</div>

Answer 1

解决方案1：使用CSS3 flexbox

如果您愿意支持大多数支持flexbox模型的现代浏览器，那么它实际上非常简单。这些是父<ul>元素所需的新规则：

.content ul {
  /* Use flexbox */
  display: flex;

  /* Allow wrapping */
  flex-wrap: wrap;

  /* Distribute empty space between elements */
  justify-content: space-between;
}

.content {
  width: 940px;
  background: gray;
}

.content ul {
  /* Use flexbox */
  display: flex;

  /* Allow wrapping */
  flex-wrap: wrap;

  /* Distribute empty space between elements */
  justify-content: space-between;

  width: 100%;
  padding: 0;
  margin: 0;
}

.content ul li {
  width: 200px;
  /* We don't need this:
  display: inline-block; */
}

.content ul li span {
  display: block;
  height: 120px;
  overflow: hidden;
}

.content ul li span img {
  width: 100%;
}

<div class="content">
  <ul>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
  </ul>
</div>

解决方案2：使用nth-child删除右边的

另一种解决方案是删除每行最后一个元素的右边距。在您的情况下，由于图像具有固定的宽度，您知道每个第4个元素是该行的最后一个元素。

所以方法是：

• 使用calc()计算每行元素之间的空间填充余量
• 使用float: left代替display: inline-block，因为我们不需要为内联元素提供无关的空白
• 在父级上使用overflow: hidden来清除浮动

calc()部分有点复杂，但您需要的是：

1. 计算内容分发后的剩余可用空间。在这种情况下，您有960px - (200px * 4)
2. 在3个元素间空格之间划分此空间

这会给你：

calc((960px - (200px * 4)) / 3);

  

警告：如果每行的元素数量未知，则此解决方案将无效，例如：当你有动态图像大小，父母宽度不确定等等时

.content {
  width: 940px;
  background: gray;
}

.content ul {
  width: 100%;
  padding: 0;
  margin: 0;
  
  /* Clearfix hack */
  overflow: hidden;
}

.content ul li {
  width: 200px;
  
  /* Use float to position children */
  float: left;
  
  /* Calculate appropriate margin to fill space up
  1. Take the remaining unoccupied space
  2. Divide by number of elements - 1
  */
  margin-right: calc((940px - 200px * 4)/3);
}

/* No margin for last item on each row
... which in this case, is every 4th child
*/
.content ul li:nth-child(4n) {
  margin-right: 0;
}

.content ul li span {
  display: block;
  height: 120px;
  overflow: hidden;
}

.content ul li span img {
  width: 100%;
}

<div class="content">
  <ul>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
    <li>
      <a href="/">
        <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span>
      </a>
    </li>
  </ul>
</div>