元素沒有寬高，而且使用的定位；
定位元素沒有寬度如何居中顯示
繁花不似錦
2018-09-11 09:46:47
1 回答
收到一只叮咚
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
一個(gè)可行的思路是，那個(gè)紅色的標(biāo)簽由于是不固定寬度的，因此它自身不要絕對(duì)定位，而是給它外面再增加一層，這增加的一層div進(jìn)行絕對(duì)定位。絕對(duì)定位的元素只用作容器，設(shè)置為能容納最大的標(biāo)簽寬度。
題主可以參考一下這段代碼：
<div class="total-container"> <div class="item"> <div class="image-placeholder"></div> <div class="label-container"> <span class="label">獎(jiǎng)率10%</span> </div> </div> <div class="item"> <div class="image-placeholder"></div> <div class="label-container"> <span class="label">獎(jiǎng)率</span> </div> </div> <div class="item"> <div class="image-placeholder"></div> <div class="label-container"> <span class="label">返獎(jiǎng)率10%</span> </div> </div></div>
.total-container{
width: 400px;
min-height: 100px;
margin: 20px auto;
padding: 20px;
border: 1px dotted #369;
overflow: hidden;
}
.item{
position: relative;
margin-right: 20px;
float: left;
}
.image-placeholder{
width: 70px;
height: 70px;
background: #9fa8da;
border-radius: 50%;
}
.label-container{
position: absolute;
width: 200%;
left: -50%;
top: 50px;
text-align: center;
}
.label{
display: inline-block;
height: 24px;
padding: 0 20px;
border-radius: 15px;
background: #d32f2f;
color: #fff;
font-size: 12px;
line-height: 24px;
}
效果是：
添加回答
舉報(bào)
0/150
提交
取消