定位和對齊HTML文本

Question

如何編寫HTML代碼以產生如下輸出：

計算1：2

計算2：2

計算3：2

合計：8

但是我需要將所有數字對齊^在頁面的此處

Answer 1

桌子會解決問題的！

參見小提琴https://jsfiddle.net/DIRTY_SMITH/rupbwpx0/1/

  <table style="width:50%">
  <tr>
    <td>Calculation 1:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Calculation 2:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Calculation 3:</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Total</td>
    <td>8</td>
  </tr>
</table>

Answer 2

HTML用於標記，如果要布局，請使用CSS。 以下HTML代碼將准確顯示您要查找的內容，也可以使用CSS設置樣式。

 <div class="main"> <span>Calculation 1:</span> <span>2</span> </div> <div class="main"> <span>Calculation 2:</span> <span>2</span> </div> <div class="main"> <span>Calculation 3:</span> <span>2</span> </div> <div class="main"> <span>Total:</span> <span>8</span> </div>