定位和对齐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进行样式设置。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;