Question

我想模仿像这样的分数：http://projectpophealth.org/images/Multi-Provider_Measure_Page.png

我已经看到了显示分数的其他方式：What would be the math symbol for representing a fraction?

但我真的很喜欢水平符号的外观和感觉。如何在HTML中显示它？

Answer 1

我已经制作了一个简单的简单html / css解决方案，你可能想要将字体调整为更合适的字体。

<body>
    <div class="fraction">
        <p class="num">6</p>
        <p class="dem">14</p>
    </div>
</body>

.fraction{
    display: inline-block;
    text-align: center;
    position:relative;
    padding:0 1em;
}

.fraction > .num {
    border-bottom: 2px solid #808080;
    padding:4px;
    margin:0 0 4px 0;
}

.fraction > .dem{
    padding: 0;
    margin: 0;
}

.fraction > .num:before{
    content: "(";
    font-size:2em;
    height:100%;
    position:absolute;
    left:0;
    top:0.2em;
}

.fraction > .dem:after{
    content: ")";
    font-size:2em;
    height:100%;
    position:absolute;
    right:0;
    top:0.2em;
}

Answer 2

正如你评论说你很难这样做，这就是答案。我使用了内联元素，我将它们转换为块级别，以便它们在另一个下面呈现，并将它们分开，我在第一个border-bottom元素上使用span。

休息，对于顶部偏移，我使用position: relative;来解决它...休息是不言自明的。

Demo

<强> HTML

<div>(<span><span>18</span><span>26</span></span>)</div>

<强> CSS

div {
    font-size: 40px;
    color: #515151;
}

div > span {
    font-size: 18px;
    display: inline-block;
}

div > span > span {
    display: block;
    padding: 0 5px;
    position: relative;
    top: 5px;
}

div > span > span:first-child {
    border-bottom: 1px solid #515151;
    color: green;
}

div > span > span:last-child {
    color: tomato;
}

我觉得这些类型的表达式或复杂的表达式对CSS Only来说会很麻烦，因此，请看一下Mathjax

如何显示水平分数符号

2 个答案: