gpt4 book ai didi

css - 元素和文本 CSS3 定位

转载 作者:行者123 更新时间:2023-11-28 16:22:02 25 4
gpt4 key购买 nike

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

enter image description here

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

最佳答案

将你的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/

关于css - 元素和文本 CSS3 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36631199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com