均匀空间div与百分比宽度

Question

我想要六个percent -widthdiv的间距均匀地沿着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;
} 

当前边距导致它们跨两行。

我发现了一些类似问题的hack，但我不确定如何将它们应用到我的具体问题。

Answer 1

inline formatting context中的元素将在HTML中产生由空格或回车引起的小水平"margin"。通过删除空格，您将删除页边距。还有其他一些技术也可以克服这种行为，其中之一就是使用float来代替

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

Answer 2

您可以将所有<div> s放在一行中，中间不使用空白字符。

<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>
    <!-- Plus arbitrarily many more boxes... -->
</div>

这些空白字符在您的<div>元素之间造成额外的空间。

Answer 3

你的页边距，加上元素的宽度和它们之间的空白之和超过100%，这是导致中断。浮动它们以移除空间，并调整计算，使总数不大于100%。

修改你的CSS为:

.inner {
    width: 14%;
    display: inline-block;
    margin: 1%;
    float:left;
}

<<p> jsFiddle例子/strong>

Answer 4

应该可以:

.inner {
    width: 15%;
    display: inline-block;
    margin-right: 2%;
    float:left;
}
.inner:last-child {
    margin-right: 0;
}

http://jsfiddle.net/pulleasy/uQcGS/7/

Answer 5

我已经更新了你的代码，请检查它JSFIDDLE

你所需要做的只是三个步骤:

1. 删除display: inline-block;并使用float:left(使用float更好，你只需要理解它)
2. 减小一点宽度(我建议16%)，并在边距中使用百分比(我建议1%)
3. 总是在使用float之后不要忘记添加样式为clear:both的div