css创建分数 |按钮纯css

/* CSS代码 */
.fraction {
display: inline-block;
font-size: 16px;
}
.fraction span {
display: inline-block;
vertical-align: middle;
}
.fraction .top {
border-bottom: 2px solid #000;
}
.fraction .bottom {
border-top: 2px solid #000;
}

首先，大家需要为分数创建一个容器，这里大家使用class为“fraction”的div元素。通过设置其display属性为inline-block，使其可以与其他元素在同一行内显示。

接着，大家在“fraction”容器内创建两个span元素，一个用于显示分子（即分数线上面的数字），另一个用于显示分母（即分数线下面的数字）。这里大家还通过设置它们的vertical-align属性为middle，使它们垂直居中对齐。

接着，大家使用class为“top”的span元素来设定枚举值为“border-bottom”属性，以使其显示为分数线上面的横线。同时，使用class为“bottom”的span元素也是同样的方法，设定其border-top属性来显示为分数线下面的横线。

最终效果如下：

以上就是CSS创建分数的介绍，希望大家可以轻松的掌握这项技能。