Question

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

Answer 1

你走了：

＆＃13;

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

＆＃13;

如果您希望使用直线而不是/，请使用此选项：

＆＃13;

.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;}

＆＃13;

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>

?

＆＃13;

您也可以使用一些纯粹的JavaScript来实现这一点：

＆＃13;

var elem = document.getElementById("fractions");

/**Fraction one*/
elem.innerHTML = frac(2, 7);
elem.innerHTML = elem.innerHTML + ' &times; ';
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>';
}

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

你可以使用css完全这样做。

<p>S <span class="frac"><sup>2</sup><span>/</span><sub>7</sub></span>.</p>


 span.frac {
      display: inline-block;
      font-size: 50%;
      text-align: center;
    }
    span.frac > sup {
      display: block;
      border-bottom: 1px solid;
      font: inherit;
    }
    span.frac > span {
      display: none;
    }
    span.frac > sub {
      display: block;
      font: inherit;
    }

Here是一个小提琴。

Answer 3

您可以使用一些java脚本库，如：

如何在html中编写有理数

3 个答案: