3

我想要看起来像这样的 HTML：

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

（即，数字按列对齐）

我可以使用表格，或者文本缩进。

我想知道其他选择，如果有的话，什么是“正确的方式”。

4

3 回答 3

2

我的两分钱用于更语义化的非表格解决方案：

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

但是，在查看了额外的标记并查看了您拥有的内容后，我认为 atable实际上是您的最佳解决方案。您有一个包含 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/

于 2013-05-13T06:23:07.073 回答
1

使用<pre>标签。来自 w3Schools 的引述：

元素中的文本以<pre>固定宽度字体（通常是 Courier）显示，并且保留空格和换行符。

或者，如果这不适合您，您可以使用 CSS 设置任何元素以通过添加white-space: pre;.

于 2013-05-13T02:00:50.257 回答
-2

我有点困惑。我不确定，我可能会正确回答你。如果您想拥有上标，请遵循以下代码：“2 <sup>1</sup> = 2

2 1 = 2

2 2 = 2

同样地。

于 2013-05-13T02:00:40.917 回答