HTML/CSS 布局数到表达的力量 (a^x)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12875645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS layout number to the power of expression (a^x)
提问by aviran
I need to layout some math expressions in a web page, cant use latex or mathML, just plain HTML (not HTML5)
我需要在网页中布局一些数学表达式，不能使用 Latex 或 mathML，只能使用纯 HTML（不是 HTML5）
I have an expression to the power of a different expression, for example (a+b+sqrt(c))^(2x+b)
我有一个不同表达式的幂的表达式，例如 (a+b+sqrt(c))^(2x+b)
The second expression should be to the right of the first expression a bit smaller and above it.
第二个表达式应该在第一个表达式的右边，稍小一点，在它上面。
Sound simple enough but I can't seem to get it right.
听起来很简单，但我似乎无法正确理解。
Any help is the styling and layout would be great, thanks.
任何帮助都是样式和布局会很棒，谢谢。
回答by Jukka K. Korpela
HTML is rather limited when it comes to mathematical expressions. In principle, HTML specifications suggest that you use supelement for superscripts, so the sample expression would be
HTML 在数学表达式方面相当有限。原则上，HTML 规范建议您使用sup元素作为上标，因此示例表达式为
(<i>a</i> + <i>b</i> + √<i>c</i>)<sup>2<i>x</i> + <i>b</i></sup>
However, the implementations of supin browsers are inconsistent and generally poor (causing e.g. uneven line spacing), so it is pragmatically better to use the spanelement with a class instead:
但是，sup在浏览器中的实现不一致并且通常很差（导致例如行间距不均匀），因此在实用上最好使用span带有类的元素：
(<i>a</i> + <i>b</i> + √<i>c</i>)<span class=sup>2<i>x</i> + <i>b</i></span>
with CSS code like
使用 CSS 代码，例如
.sup {
position: relative;
bottom: 1ex;
font-size: 80%;
}
Some reasons are explained on my page Math in HTML (and CSS). Also consider JavaScript-based libraries for pages containing complicated math expressions:
我的页面Math in HTML (and CSS)解释了一些原因。对于包含复杂数学表达式的页面，还可以考虑基于 JavaScript 的库：
The sample expression is a borderline case; it would look mathematically more correct if the square root were represented using a square root symbol with vinculumand not just √c, and trying to construct a vinculum using HTML and CSS gets rather dirty, but otherwise it can be reasonably handled with HTML and CSS.
示例表达式是一个临界情况；如果平方根使用带有vinculum而不仅仅是 √ c 的平方根符号来表示，那么在数学上看起来会更正确，并且尝试使用 HTML 和 CSS 构建一个 vinculum 会变得相当脏，但否则可以使用 HTML 和 CSS 合理处理.
回答by icio
HTML defines a <sup>tag for superscript. For example:
HTML<sup>为上标定义了一个标签。例如：
a<sup>x</sup>
of which you can alter the margins and vertical alignment with CSS.
其中您可以使用 CSS 更改边距和垂直对齐方式。
回答by Asad Saeeduddin
You can use a <sup>element to display the exponent as a superscript of the base. The HTML involved would be:
您可以使用<sup>元素将指数显示为底的上标。涉及的 HTML 将是：
(a+b+sqrt(c))<sup>(2x+b)</sup>
A better approach would be to use CSS to achieve the same result, for which you can use a span with the property:
更好的方法是使用 CSS 来实现相同的结果，为此您可以使用带有属性的 span：
vertical-align:super;
A demonstration can be seen here.
可以在此处查看演示。
回答by Keshav Poudel
Subscript and Superscript character character can be specified by the sub and sup.
下标和上标字符可以由 sub 和 sup 指定。
X<sub>2</sub><sup>3</sup>
This gives X suffix 2 and power 3. This is the easy way to give power to the number in html.
这给出了 X 后缀 2 和幂 3。这是在 html 中赋予数字幂的简单方法。
