元素和文本CSS3定位

Question

我是CSS的新手，我对不同元素的每个横向定位都很困难。我试图将3个元素放在同一行，文本段落如图所示。有什么建议吗？

＆＃13;

＆＃13;

.planning {
  position: relative;
  top: 20px;
}
.circle1,
.circle2,
.circle3 {
  width: 43px;
  height: 43px;
  background-color: #add136;
  border-radius: 25px;
  display: inline-block;
}
.circle1 {
  float: left;
}
.circle2 {
  text-align: center;
}
.circle3 {
  float: right;
}

＆＃13;

<div class="planning">
  <div class="circle1">
    <p>Simple</p>
  </div>
  <div class="circle2">
    <p>Transparent</p>
  </div>
  <div class="circle3">
    <p>Collaborative</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将你的CSS更改为：

.planning{

    position: relative;
    top: 20px;
}

.planning div{
    display:inline-block;
    width:33%;
    text-align:center;
    position: relative;
    border-bottom:1px solid silver;
    padding-bottom:15px;
}
.planning div:hover{
    border-bottom: 1px solid #88be14;
}

.planning div:before{
    background: silver ;
    border-radius:50%;
    color:white;
    position:absolute;
    left:10px;
    width: 43px;
    height: 43px;
    padding:10px;
    font-size:15pt;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing:border-box;
}

.planning div:hover:before{
    background: #88be14 ;
}

.circle1:before{
    content:"1";
}

.circle2:before{
    content:"2";
}

.circle3:before{
    content:"3";
}

编辑样本：

https://jsfiddle.net/zu86kgrr/4/