将表单字段显示为分数

Question

我正在努力弄清楚如何正确对齐显示以下代码：

 <label>N = A</label>
 <input type="number" id="A" name="" style="width:10%;">
 <label style="width:2em; height:4em;">+</label>
 <label style="width:2em; height:4em;">&#40;</label>
 <label>B</label>
 <input type="number" id="B" style="width:10%;" min="0" max="16777215">
 <label style="width:2em; height:4em;">+</label>
 <label>C</label>
 <input type="number" id="C" style="width:10%;" min="0" max="16383">
 <label style="width:2em; height:4em;">&#47;</label>
 <label for="D">D</label>
 <input type="number" id="D" name="" style="width:10%;" min="2" max="16383">
 <label style="width:2em; height:4em;">&#41;&nbsp&#47;&nbsp16,777,216&nbsp&nbsp</label>

我想要达到的目标是：

              C
         B + ---
              D
N = A + ----------
        16,777,216   

对我而言，使用JavaScript，JQuery或CSS并不重要。不幸的是，我对所有这三个科目的了解非常有限。我尝试在线查找并找到了一些东西，但没有一个告诉我如何对齐所有东西。只有部分部分对齐。

感谢任何帮助。

Answer 1

您可以执行许多选项来实现所需的输出，例如CSS Flexible Boxes，但最简单的方法是使用html table。