.gradeinfo { display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; } .htmleaf { width:300px; height:30px; line-height:30px; border-radius:15px; box-shadow:0px 0px 1px 1px #888888 inset; display:flex; align-items:center; margin-left:10px; position:relative; overflow:hidden; } .perinfo { margin-left:2px; height:26px; border-radius:15px; position:absolute; left:0px; }
代码比较简单,就是根据两个取值及父级的确定宽度来计算显示的子集的宽度,这在做显示等级或是进度条的时候使用