当前位置：文江博客话题详情

如何用html写小数值？

发布于 2024-12-05 20:31:14 字数 156 浏览 0 评论 0原文

我想写分数值，如下图所示：

在此处输入图像描述

如何使用 html 编写分数值而不使用图像？

注意：我不想要这个 1 1/2 图案，但严格如上图所示

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡淡的优雅 2024-12-12 20:31:14

请尝试以下操作：

1<sup>1</sup>⁄<sub>2</sub>

显示为：

1¹⁄₂

Try the following:

1<sup>1</sup>⁄<sub>2</sub>

This displays as:

1¹⁄₂

回复收藏 0 原文

凑诗 2024-12-12 20:31:14

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

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

回复收藏 0 原文

避讳 2024-12-12 20:31:14

以下代码将按照问题中的示例进行渲染，如果客户端不支持 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;
}

中间的服务仅适用于不渲染 CSS 的客户端 - 文本仍然可读为 1 12/256 - 这就是为什么您应该在整数和分数之间放置一个空格。

您可能想要更改字体大小，因为生成的元素可能比行中的其他字符高一点，或者您可能想要使用相对位置将其稍微移动到底部。

但这里介绍的总体思路可能足以满足基本用途。

The following code will be rendered just as the example in the question, and if the client does not support CSS it will be rendered as plain text, still readable as a fraction:

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

The middle <span> serves only for the clients who do not render CSS - the text is still readable as 1 12/256 - and that's why you should place a space between the integer and the fraction.

You may want to change the font-size, because the resulting element may be a little taller than the other characters in the line, or you may want to use a relative position to shift it a little to the bottom.

But the general idea, as presented here, may be enough for the basic use.

回复收藏 0 原文

国际总奸 2024-12-12 20:31:14

查看以下内容：

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 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>

CodePen

Check out the following:

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 <span class="frac"><sup>42</sup><span>⁄</span><sub>73</sub></span>.</p>

CodePen

回复收藏 0 原文

叹梦 2024-12-12 20:31:14

您可以将和元素与分数斜杠实体 ⁄ 结合使用代码>

¹⁄₂ 是¹⁄₂

更新：我做了这个小提琴使用表格显示 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>

You can use <sup> and <sub> elements in conjunction with the fraction slash entity ⁄

<sup>1</sup>⁄<sub>2</sub> is ¹⁄₂

UPDATE: I made this fiddle that shows a hyphenated fraction in HTML using a table.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>

回复收藏 0 原文

情归归情 2024-12-12 20:31:14

我认为有一种更简单的方法可以做到这一点。使用以下 HTML。

1 ½

Result is 1 ½

I think there is an easier way for doing this. Use the following HTML.

1 ½

Result is 1 ½

回复收藏 0 原文

み青杉依旧 2024-12-12 20:31:14

使用 MathML （规范，维基百科）：

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

Using MathML (Specification, Wikipedia):

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

回复收藏 0 原文

廻憶裏菂餘溫 2024-12-12 20:31:14

使用纯 html 并使用 br 的 margin 属性，您可以解决此问题

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>  <sup> <big>2</big></sup>

Using pure html and with margin property of br you can work around

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>  <sup> <big>2</big></sup>

回复收藏 0 原文

画中仙 2024-12-12 20:31:14

这是使用较新 CSS 方法的另一种方法。此方法还使用自定义标记，但如果您不喜欢自定义标记，可以将其更改为

。

将以下内容复制到您的 CSS 中：

如果您使用类，请使用 .fraction 和 .numer

fraction {
  display: inline-grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;

  font-size: 0.8em; // You can change fraction size here. I recommend 0.5em ~ 0.8em
  vertical-align: top;
}

numer {
  border-bottom: 1px solid;
}

您现在可以使用这样的标签：

Add 1 <fraction> <numer>1</numer> 2 </fraction> cups of flour into the bowl and stir.

输出

我还建议对屏幕阅读器输出使用只读格式：

CSS

read {
  position: absolute;
  font-size: 0;
}

HTML

1 <fraction> <read>and</read> <numer>1</numer> <read>over</read> 2 </fraction>

屏幕阅读器：“一加一除二...”

Here is another method using newer CSS methods. This method also uses custom tags, but you can change these to <div class = "..."></div> if you're not fond of custom tags.

Copy the following to your CSS:

Use .fraction and .numer if you use classes instead

fraction {
  display: inline-grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;

  font-size: 0.8em; // You can change fraction size here. I recommend 0.5em ~ 0.8em
  vertical-align: top;
}

numer {
  border-bottom: 1px solid;
}

You can now use the tags like this:

Add 1 <fraction> <numer>1</numer> 2 </fraction> cups of flour into the bowl and stir.

Output

I'd also recommend using read-only formatting for screen-reader output:

CSS

read {
  position: absolute;
  font-size: 0;
}

HTML

1 <fraction> <read>and</read> <numer>1</numer> <read>over</read> 2 </fraction>

Screen-reader: "one and one over two..."

回复收藏 0 原文

余生一个溪 2024-12-12 20:31:14

简单的“内联”HTML

a
<span style="display:inline-flex;flex-direction:column;vertical-align:middle;">
    <span>1</span>
    <span style="border-top:1px solid">2</span>
</span>
b

CodePen

https://codepen.io/eyedean/pen/bGMqBaB

屏幕截图

Simple "inline" HTML

a
<span style="display:inline-flex;flex-direction:column;vertical-align:middle;">
    <span>1</span>
    <span style="border-top:1px solid">2</span>
</span>
b

CodePen

https://codepen.io/eyedean/pen/bGMqBaB

Screenshot

回复收藏 0 原文

橙幽之幻 2024-12-12 20:31:14

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>  <sup> <big>2</big></sup>

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>  <sup> <big>2</big></sup>

回复收藏 0 原文

~没有更多了~

关于作者

蹲在坟头点根烟

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

如何用html写小数值？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

简单的“内联”HTML

CodePen

屏幕截图

Simple "inline" HTML

CodePen

Screenshot

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何用html写小数值？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

简单的“内联”HTML

CodePen

屏幕截图

Simple "inline" HTML

CodePen

Screenshot

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。