html - 如何在html中写有理数

Question

谁能告诉我如何在 html 浏览器中写出这种类型的有理数？我尝试了很多方法，但它不起作用。

Answer 1

给你:

s<sup>2</sup>&frasl;<sub>7</sub> &times; <sup>4</sup>&frasl;<sub>3</sub>?

如果您更喜欢直线而不是 /，请使用:

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle; 
    letter-spacing: 0.001em;
    text-align: center;
    
    }
.frac > span { 
    display: block; 
    padding: 0.1em; 
    }
.frac span.bottom {border-top: thin solid black;}
.frac span.symbol {display: none;}

s

    <div class="frac">
        <span>2</span>
        <span class="symbol">/</span>
        <span class="bottom">7</span>
        
    </div>
    &times;
    <div class="frac">
        <span>4</span>
        <span class="symbol">/</span>
        <span class="bottom">3</span>
        
    </div>

?

您也可以使用一些纯 JavaScript 实现这一点，例如:

var elem = document.getElementById("fractions");

/**Fraction one*/
elem.innerHTML = frac(2, 7);
elem.innerHTML = elem.innerHTML + ' × ';
elem.innerHTML = elem.innerHTML + frac(4, 3);


/**Fraction two*/

elem.innerHTML = elem.innerHTML + "<BR /><BR />" + frac(10, 6);
elem.innerHTML = elem.innerHTML + ' &times; ';
elem.innerHTML = elem.innerHTML + frac(9, 5);

function frac(num1, num2)
{ 
  return '<div class="frac"><span>'+num1+'</span><span class="bottom">'+num2+'</span></div>';
}

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle; 
    letter-spacing: 0.001em;
    text-align: center;
    
    }
.frac > span { 
    display: block; 
    padding: 0.1em; 
    }
.frac span.bottom {border-top: thin solid black;}
.symbol {display: none;}

<div id ="fractions"></div>