html - 为什么等于 100% 的内联 block 不适合一行

Question

这是我的代码:http://jsfiddle.net/3GPTy/4/

CSS:

.price {
    display: inline-block;
    width: 19%;
    background-color: pink;
    margin-right: 8%;
}
.last {
    margin-right: 0%
}

 .container {
    width: 780px;
    margin:0px auto;
}
* {
    margin: 0px;
    padding: 0px;
}

我不明白的是，我有 4*19 + 3*8，它应该等于 100% 但它仍然不适合一条线？

Answer 1

为了进一步详细说明，这里有几种解决问题的方法:

• 注释掉空格

  </div><!--
  --><div>
  

• 在标签中加入空格

  </div
  ><div>
  

• 把它放在一条线上

  </div><div>
  

尤其是最后一个，理想情况下你应该缩小你的 HTML - 我用 PHP 魔法即时进行，这样我就可以编写可读的 HTML 并且没有空格。