<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;
}
css根据内容来自适应大小的圆
转载请注明出处或者链接地址:https://www.qianduange.cn//article/12452.html
发布的文章
如果不想35岁被淘汰这篇文章必看,web前端开发基础教程之HTML5页面结构基础,web快速开发框架
2024-06-22 10:06:47
HTML制作开心网游戏静态页面
2024-06-22 10:06:35
HTML5 新增元素
2024-06-22 10:06:20
【前端】HTML5基础
2024-06-22 10:06:36
HTML5:Canvas 标签,腾讯前端面试题社招
2024-06-22 10:06:27
HTML简单学习记录,程序员深度学习
2024-06-22 10:06:10
简单的学生网页作业源码 基于HTML的环境网站设计 HTML CSS环保网站项目实现 带设计说明psd
2024-06-22 10:06:05
html/javascript-表格的创建和使用
2024-06-22 10:06:05
HTML CSS 连载 | 62 - 分页实现
2024-06-22 10:06:49
依赖html破解cloudflare-turnstile
2024-06-22 10:06:46
大家推荐的文章