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会产生差距，因此您的目的是消除HMTL中li之间不必要的差距（我在这个小提琴上使用的解决方案）< / p>

在这里查看其他解决方案：

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

为什么3 x 33％宽的色谱柱不适合100％容器

1 个答案: