css根据内容来自适应大小的圆

最新推荐文章于 2024-01-18 13:37:57 发布

草台班班长_Ndie

最新推荐文章于 2024-01-18 13:37:57 发布

阅读量804

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_46978096/article/details/128000639

版权

<view class="problem-option"><text>A</text></view>

.problem-option {
   background-color: #f4f4f4;
    border-radius:50%;
    display: inline-block;
    text-align: center;
    line-height: 1;
	border: 2rpx solid #888;
	margin-right: 16rpx;
}
//画自适应大小的圆
.problem-option text {
    display: block;
    padding: 50%;
	margin: -2.6em -69% 0; //第一位设置圆的高度，第二位设置字的左右位置
	position: relative;
	top: 1.25em; //设置字的上下位置
	border: 0.8em solid transparent; //第一位设置圆的宽度
    white-space: nowrap;
}