html / css：括号中输入元素的表格/网格
[英]html/css: table/grid of input elements enclosed in parenthesis
问题描述
I need a table/grid of 2x2 input elements, enclosed in parenthesis. 
我需要用括号括起来的2x2输入元素的表/网格。
The objective is, in a page with a mathematics test, allow user to introduce the values of a matrix. 目的是在带有数学测试的页面中，允许用户介绍矩阵的值。 The matrix must appear in the usual form of parenthesis enclosing it. 矩阵必须以括号的通常形式出现。
That is, starting from this code or anything equivalent: 也就是说，从以下代码或任何等效代码开始：
<html> <body> A + B = <table> <tr> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> </tr> <tr> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> </tr> </table> </body> </html>
two corrections must be done: 必须进行两个更正：
- mandatory: the 2x2 matrix/grid/table of input elements must be enclosed in big parenthesis 必填：输入元素的2x2矩阵/网格/表必须用大括号括起来
- nice to have: the characters "A+B=" should appear in the same line than the matrix, centered vertically. 很高兴：字符“ A + B =”应该出现在与矩阵相同的行中，并垂直居中。
Note: the page supports MathJax, thus, solutions using MathJax are also valid. 注意：该页面支持MathJax，因此，使用MathJax的解决方案也是有效的。
1 个解决方案
解决方案1
2 2019-08-06 20:34:37
Here's a way to do it using the table that you already have. 这是一种使用现有表进行操作的方法。 Note that I used inline styles merely for the demo. 请注意，我仅将内联样式用于演示。 You can create a style class as needed 您可以根据需要创建样式类
<html> <body> <table> <tr> <td rowspan="2"> A+B= </td> <td rowspan="2" style="font-size:2em">(</td> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> <td rowspan="2"><span style="font-size:2em">)</span></td> </tr> <tr> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> <td><input type="text" $INPUT_PATTERN name="a11" autofocus/></td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.