Question

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

不要忘记内联块已经为元素添加了一些余量。

HTML：

<div id="five">

<div>
</div>

<div>
</div>

<div>
</div>

</div>

CSS：

#five {

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

#five > div {

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

Answer 1

首先使用样式添加范围：

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

然后将text-align的{{1}}更改为#five：

justify

JSFiddle

Answer 2

你可以用这个来实现这个目标：

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

 <div>
 </div>

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

并且：

#five {
 text-align:center;
 width:800px;
}

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

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

Demo

甚至是内联元素之间的宽度

2 个答案: