Question

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

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

为什么元素有这么奇怪的大小？它们不应该是它们内容的大小吗？如何创建一个足够大的框来包含文本，而不给任何元素一个明确的大小？

（对于缺少图片感到抱歉。我上传了一张图片，但我没有适当的声誉来张贴它。）

感谢。

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;

中心的盒装数学方程式

2 个答案: