css - 为什么 3 x 33% 宽度的列不适合 100% 的容器

Question

这个问题已经困扰我一段时间了。请有人解决我这个代码谜题，而不将列宽从完全等于 100% 更改。

<style>
/* slider style rules */
  * {
     padding: 0; margin: 0;  
    }
  .slider ul {
     list-style: none; 
   }
 .slider ul li {
    display: inline-block;
    width: 33%; 
        /* ^= set this to 32% and watch the horizontal adjustment
        of the items if your   confused   */
    }
   </style>

   <div class="slider">
      <h2>Why do 3 x 33% width columns not fit in a 100% container?</h2>
        <span>Shouldn't there be an <em>EXTRA</em>1%? if each column is 33% x 3 columns = 99%    why with every single elements padding and margin reset do the elements not fit in the page</span>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
   </ul>
 </div>

Heres the fiddle...

Answer 1

这是一个工作片段:

/* slider style rules */

* {
  padding: 0;
  margin: 0;
}
.slider ul {
  list-style: none;
}
.slider ul li {
  display: inline-block;
  border: 1px solid red;  /*demo purposes */
  box-sizing: border-box; /*demo purposes */
  width: 33%;  /*<= set this to 32% and watch the horizontal adjustment of the items if your confused */
}

<div class="slider">
  <h2>Why do 3 x 33% width columns not fit in a 100% container?</h2>
  <span>Shouldnt there be an <em>EXTRA</em> 1%? if each column is 33%x3coluns = 99% why with every single elements padding and margin reset do these els not fit in the page</span>
  <ul>
    <li>Item</li><li>Item</li><li>Item</li>
  </ul>
</div>

问题是 li 具有 display:inline-block ，这会产生间隙，因此您的方法是删除 li 之间不必要的间隙在你的 HMTL 中(我在这个 fiddle 上使用的解决方案)

在此处查看其他解决方案:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/