Css 内联元素之间的均匀宽度

我有三个内联元素（我们称它们为正方形），它们位于父div的中心。我要做的是将第一个正方形与父div的左侧对齐，将第二个正方形与中心对齐，将第三个正方形与右侧对齐。换句话说，在正方形之间创建相等的内边距

不要忘记内联块已经为元素添加了一些边距

HTML:

<div id="five">

<div>
</div>

<div>
</div>

<div>
</div>

</div>

#five {

    text-align:center;
    width:1110px;
}

#five > div {

    width:340px;
    background-color:red;
    height:200px;
    display:inline-block;
}

---

首先添加带有以下样式的跨度：

#five > span {    
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

然后将

的
文本对齐
更改为
对齐
：

#five {
    text-align:justify;
    width:1110px;
}

您可以通过以下方法实现这一点：

<div id="five">
 <div id="left">
 </div>

 <div>
 </div>

 <div id="right">
 </div>
</div>

这样，它将左对齐
div
，右对齐
div

为您的答案创建了一个提琴：很酷，但我希望左、右正方形与父元素的边框对齐。很好，我忘了您可以对齐
内联块
elementsfantatic！幽灵般的最后一个元素占据了100%的宽度，迫使返回，因此是完整的前一行，这是相当巧妙的@皮特，我可能会指出，你实际上不需要添加一个额外的span-。@Barney，我没有说过任何关于span的内容？@Pete上面的答案（你标记为已接受）包括使用span来实现你要求的效果。它就在解决方案的第一行代码中：
#five>span
。我提出了一个不涉及额外标记的解决方案。@Barney我没有要求它，我只是评论说这是一个很好的解决方案
#five {
 text-align:center;
 width:800px;
}

 #five > div {
  width:140px;
  background-color:red;
  height:200px;
  display:inline-block;
 }
 #left{
  float: left;
 }
#right{
 float: right;
}