为什么3 x 33％宽的色谱柱无法容纳在100％的容器中 [英] Why do 3 x 33% width columns not fit in a 100% container

问题描述

这个问题已经困扰了我一段时间了.请有人解决我这个代码之谜，而不必将列宽等于100％精确地改变.

This issue has been irking me for some time now. PLEASE somebody solve me this code riddle without changing the column widths from equaling EXACTLY 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>

在这里摆弄小提琴...

推荐答案

以下是有效的代码段:

/* 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中(我在此提琴上使用的解决方案)

the problem is the li having display:inline-block which create gaps, so you on way is to remove unnecessary gaps between li in your HMTL (the solution I used on this fiddle)

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

check other solutions here:

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

这篇关于为什么3 x 33％宽的色谱柱无法容纳在100％的容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！