均匀空间divs的百分比宽度？

Question

我希望六个百分比宽度的div沿着100%宽度的div均匀分布,填满整个100%的宽度,但它们之间的间距很小.

这是一个显示问题的JSFiddle:

http://jsfiddle.net/uQcGS/1/

或者在这里编码:

<div class="container">
    <div class="inner red">&nbsp;</div>
    <div class="inner orange">&nbsp;</div>
    <div class="inner yellow">&nbsp;</div>
    <div class="inner green">&nbsp;</div>
    <div class="inner blue">&nbsp;</div>
    <div class="inner purple">&nbsp;</div>
</div>
div { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
.container { 
  width: 100%;
}
.inner { 
  width: 16%;  
  display: inline-block;
  margin: 1px;
} 

目前,保证金导致他们突破两条线.

我发现了类似问题的一些黑客,但我不知道如何将它们应用于我的具体问题.

Answer 1

在元素inline formatting context会产生由你的HTML中的空格或回车的小横"保证金".通过删除空格,您将删除边距.还有一些其他的技术来克服这种行为为好,其中一人是在运用float,而不是

http://jsfiddle.net/uQcGS/9/