如何在列中垂直對齊HTML文本

Question

我想要HTML看起來像這樣：

we already know that: 2*1 = 2
                      2*2 = 4 
                      2*3 = 6

（即，數字按列排列）

我可以使用表格，也可以使用文本縮進。

我想知道其他選擇，如果有的話，是“正確的方法”。

Answer 1

我的兩分錢是一個更加語義化的非表解決方案：

<div class="content">we already know that:</div>
<div class="math">
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">1</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">2</span><span class="operator">=</span><span class="result">4</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">3</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">300</span><span class="operator">=</span><span class="result">600</span>
    </div>
</div>

.content {float:left;}

.math {float:left;}
.math .operand {width: 3em;display: inline-block; }
.math .operator {padding-left: 5px; padding-right:5px }
.math .result {font-weight:bold; text-align:right;width:3em;display: inline-block; }

但是，看過額外的標記並查看你所擁有的內容，我認為table實際上是你最好的解決方案。 您有一個包含5列，兩個操作數列，兩個操作符列和一個結果列的數據表。

http://jsfiddle.net/vnMM2/

更新表版本（快速和臟轉換）

<div class="content">we already know that:</div>
<table class="math">
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">1</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">2</td>
        <td class="operator">=</td>
        <td class="result">4</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">3</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">300</td>
        <td class="operator">=</td>
        <td class="result">600</td>
    </tr>
</table>

.content {float:left;}
.math {float:left;}
.math td { text-align:right}

.math .result {font-weight:bold }

http://jsfiddle.net/vnMM2/2/

Answer 2

使用<pre>標簽。 來自w3Schools的報價：

<pre>元素中的文本以固定寬度字體（通常為Courier）顯示，並保留空格和換行符。

或者，如果這不是您的選項，您可以使用CSS設置任何元素以通過添加white-space: pre;來保留空白white-space: pre; 。

Answer 3

我有點困惑。 我不確定，我可以回答你。 如果您想要上標，請遵循以下代碼：“ 2 <sup>1</sup> = 2

2 ¹ = 2

2 ² = 2

同樣。