javascript - 对齐显示为分数的表单域

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。