對齊表單域的時候都顯示爲分數

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。