居中、盒装的数学方程式

Question

我正在尝试使用 MathML 作为 HTML5 的一部分来制作居中的盒装数学方程式。问题是盒子。如果我在我的 div 元素上放置一个边框，边框足够高，但它一直延伸到屏幕的左侧和右侧。如果我在我的数学元素上放置一个边框，它的宽度是正确的，但对于多行 table.

中的元素来说不够高

<div align="center" style="border: 1px solid #000;">
  <math style="border: 1px solid #000;"><mi>x</mi><mfenced open="{" close=""><mtable>
    <mtr><mtd><mtext>row 1</mtext></td></mtr>
    <mtr><mtd><mtext>row 2</mtext></td></mtr>
  </mtable></mfenced></math>
</div>

为什么元素的大小如此奇怪？他们不应该都是他们内容的大小吗？如何创建一个刚好足以容纳文本的框，而不给任何元素明确的大小？

（抱歉缺少图片。我上传了一张，但我没有适当的声誉 post 它。）

谢谢。

Answer 1

<div> 是块元素，因此它将填满当前父框的整个宽度。您可以将其设置为使用 display: inline-block; 以适应其内容的宽度：

<div align="center" style="border: 1px solid #000; display: inline-block;">
  <math><mi>x</mi><mfenced open="{" close=""><mtable>
    <mtr><mtd><mtext>row 1</mtext></mtd></mtr>
    <mtr><mtd><mtext>row 2</mtext></mtd></mtr>
  </mtable></mfenced></math>
</div>

Example Fiddle

此外，在您的代码中您使用 </td> 而不是 </mtd>。

Answer 2

是块元素，因此它覆盖了页面的整个宽度。您可以将其在 CSS 中的显示属性设置为内联，然后它将按您的需要工作。可能你需要一个额外的元素来覆盖内部元素。

display: inline;

居中、盒装的数学方程式

Centered, boxed math(s) equations

html

css

mathml