web-dev-qa-db-ja.com

HTMLを使用して小数の値を書き込む方法は？

次の図のような小数値を書きたいです。

enter image description here

画像を使用せずにhtmlを使用して小数の値を書き込むにはどうすればよいですか？

注：この1 1/2パターンは必要ありませんが、厳密には上記の写真と同じです

htmlnumbersfractions
45
user774411

以下を試してください：

1<sup>1</sup>&frasl;<sub>2</sub>

これは次のように表示されます。

11⁄2

63
thomson_matt
.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;
} 
1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>
17
lokesh

次のコードは、質問の例と同じようにレンダリングされます。クライアントがCSSをサポートしていない場合、プレーンテキストとしてレンダリングされ、小数部としても読み取り可能です。

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</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;
}

真ん中 <span>は、CSSをレンダリングしないクライアントにのみ役立ちます-テキストは1 12/256-それが、整数と小数の間にスペースを置くべき理由です。

結果の要素は行の他の文字よりも少し高いため、font-sizeを変更したり、相対的な位置を使用して少し下に移動したりすることができます。

しかし、ここで紹介する一般的な考え方は、基本的な使用には十分かもしれません。

11
Arsen7

<sup>および<sub>要素をfractionスラッシュエンティティと組み合わせて使用​​できます&frasl;

<sup>1</sup>&frasl;<sub>2</sub>は 1⁄2

[〜＃〜] update [〜＃〜]： this fiddle を使用して、HTMLでハイフネーションされた分数を表示します表。

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>
5
Xavi López

これを行う簡単な方法があると思います。次のHTMLを使用します。

1 &frac12;
3
adithyan sp

以下を確認してください。

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}
<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

CodePen

2
Giorgi Gzirishvili

MathMLの使用（ 仕様 、 Wikipedia ）：

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>
2
0b10011
br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
0
user7930187

純粋なhtmlを使用し、brのmarginプロパティを使用すると、回避できます

br {   
    content: "";
    margin: -1%;
    display: block;
 }
<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>
0
Arun Sharma