如何在不使用flexbox的情况下证明间距？

Question

由于浏览器支持较少，我没有使用flexbox。 现在我在包装中有6个li。包装为900px，每个li为400px。我怎么能证明它们之间的间距？因此，两个元素在一行中，并且每个元素在左侧和右侧都具有25px的边距。我还必须让它们具有响应性，所以我不想只是对它们进行硬编码。请参考图片。

Answer 1

试试这个：

＆＃13;

＆＃13;

ul {
  max-width: 900px;
  font-size: 0;
  text-align: center;
  margin: 0px auto;
}
li {
  height: 40px;
  max-width: 400px;
  width: 40%;
  width: calc(50% - 50px);
  margin: 25px 5%;
  margin: calc(25px);
  display: inline-block;
  background: red;
  font-size: 12px;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

相当简单，实际上，如果您不介意旧浏览器获得稍差的体验（缺少对calc支持的浏览器会看到不同宽度的单元格，因为保证金和单元格都必须加起来50%，因此它们会回到margin: 25px 5%，而支持它的浏览器将使用calc(50% - 50px)，这是整个保证金。

请注意，在较小的尺寸上，margin会保留，但块会更改尺寸，直到达到最大宽度。另请注意，必须在li内重置字体大小，因为0中的字体大小设置为ul，以消除inline-block之间的任何间距。但是，这不是必需的，因为块总是填充空间并且容器居中，因此您可能希望单独留下font-size并将float li放在左侧，将以下行添加到您的css：

ul:after { width: 100%; content: ''; clear: both; }

确保您的ul占用适当的空间量float - ed元素不会为您执行此操作。

Answer 2

这是另一种解决方案，可以在不使用flexbox的情况下证明间隔列表块。

＆＃13;

＆＃13;

body {
  background-color: #ffffff;
  margin: 50px 0;
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.main-wrap {
  postion: relative;
  width: 900px;
  background-color: #f5f5f5;
  border: 1px solid #eeeeee;
  margin: 0 auto;
  display: table;
}
.item-wrap {
  margin: 20px auto 0 auto;
  list-style: none;
}
.list-item {
  background-color: #ECECEC;
  width: 400px;
  float: left;
  text-align: center;
  padding: 50px 0;
  margin: 0 20px 20px 0;
}
.list-item:last-child {
  margin: 0;
}

＆＃13;

<div class="main-wrap">
  <ul class="item-wrap">
  
    <li class="list-item">  
      block1
    </li>  
    <li class="list-item">  
      block2
    </li>
    
    <div class="clearfix"></div>
   
    <li class="list-item">  
      block3
    </li>  
    <li class="list-item">  
      block4
    </li>
    
    <div class="clearfix"></div>
    
     <li class="list-item">  
      block5
     </li>  
     <li class="list-item">  
      block6
    </li>
    
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;