css - 元素和文本 CSS3 定位

Question

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

.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;
}

<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>

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/