Html Div未对齐
需要水平显示圆吗 用于css 看到我的另一个帖子了吗Html Div未对齐,html,css,Html,Css,需要水平显示圆吗 用于css 看到我的另一个帖子了吗 如果希望水平显示，请尝试将容器添加到进度圈和内联div中，并将display:inline块应用于容器，如下所示： 编辑：删除了导致动画失败的额外范围标记 身体{ 字体系列：“蒙特塞拉特”； } h1{ 颜色：63B8FF； 文本对齐：居中； } .circleCont{ 宽度：150px； 显示：内联块； } .内联{ 文本对齐：居中； } .进步圈{ 位置：相对位置； 显示：内联块； 保证金：1rem； 宽度：120px； 高度：12
如果希望水平显示，请尝试将容器添加到进度圈和内联div中，并将display:inline块应用于容器，如下所示： 编辑：删除了导致动画失败的额外范围标记 身体{ 字体系列：“蒙特塞拉特”； } h1{ 颜色：63B8FF； 文本对齐：居中； } .circleCont{ 宽度：150px； 显示：内联块； } .内联{ 文本对齐：居中； } .进步圈{ 位置：相对位置； 显示：内联块； 保证金：1rem； 宽度：120px； 高度：120px； 边界半径：50%； 背景色：ebebeb； } .进展周期：之后{ 内容：； 显示：内联块； 宽度：100%； 身高：100%； 边界半径：50%； -webkit动画：colorload2s； 动画：彩色加载； } .进度循环跨度{ 字号：1rem； 颜色：8B； 位置：绝对位置； 左：50%； 最高：50%； 显示：块； 宽度：60px； 高度：60px； 线高：60px； 左边距：-30px； 利润上限：-30px； 文本对齐：居中； 边界半径：50%； 背景：fff； z指数：1； } .进度循环跨度：之后{ 字号：600； 颜色：8B； } .进度循环。进度-45：之后{ 背景图像：线性梯度90度，b4b5aa 50%，ebebeb 50%，ebebeb，线性梯度90度，ebebeb 50%，透明50%，透明； } @-webkit关键帧颜色加载{ 0% { 不透明度：0； 变换：旋转0度； } 100% { 不透明度：1； 变换：旋转360度； } } 333 标记A 400 标记A 250 标记A
需要更好的描述。。。包括CSSThanks@Akatsuki777，但圆圈的动画没有work@PaulJames动画效果很好，你刚刚得到了相反方向的渐变，它应该是背景图像：线性渐变90度，b4b5aa 50%，ebebeb 50%，ebebeb，线性渐变90度，ebebeb 50%，透明50%，透明；}
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="progress-circle.css">
</head>
<body>
<div class="progressContainer">
<div class="progress-circle progress-45"><span>333</span></div>
<div class="inline" >Tag A</div>
<div class="progress-circle progress-45"><span>444</span></div>
<div class="inline" >Tag A</div>
<div class="progress-circle progress-45"><span>555</span></div>
<div class="inline" >Tag A</div>
</div>
</body>
</html>