如何在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>

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

这里是一把小提琴。

Answer 3

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

• MathJax
• GladTex
• ...

Answer 4

为了获得最大的兼容性，纯 HTML 4.01 没有任何现代的花招：

<table rules="rows">
  <tbody>
    <tr>
      <td rowspan="2">s&nbsp;</td>
      <td>2</td>
      <td rowspan="2">
        &times;
      </td>
      <td>4</td>
    </tr>
    <tr>            
      <td>7</td>
      <td>3</td>  
    </tr>
  </tbody>
</table>