Html 将此表的内容与CSS对齐的最佳实践？

在一个博客的移动版本上工作，我正试图实现这个内容的布局

我可以破解它，或者我可以用一张桌子。但我想知道CSS中如何最好地实现这一点的最佳实践。现在出现了一些挑战。我在杰基尔工作，所以这篇文章是用降价法写的。我按照上面的说明把它放在一起

* Example 1: A BruxZir bridge has 3 mm high x 3 mm wide connectors.

    3 mm2   x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load
    in the oral environment, according to the Rule of 27.

* Example 2: A BruxZir bridge has 4 mm high x 2 mm wide connectors.

    4 mm2 x 2 mm = 4x4x2 = 32. This is an even better outcome.

* Example 3: A BruxZir bridge has 2 mm high x 4 mm wide connectors.

    2 mm2 x 4 mm = 2x2x4=16. This outcome of only 16 is insufficient. 

产生

因为这是一篇如此独特的文章，我正在考虑不将其包含在主css文件中。即使是内联代码，如果我必须的话。我在网上看到了一个类似的问题。但代码似乎很冗长

所以我把它做成了一张桌子。纯粹的降价方案似乎不可行，达林·Fireball说：

对于Markdown语法未涵盖的任何标记，只需使用HTML本身。不需要在它前面加上前缀或分隔符来表示您正在从Markdown切换到HTML；你只需要使用标签

唯一的限制是块级HTML元素，例如

，
我是否应该继续使用这种可能无法重复使用的特定样式？或者有更好的做法吗？
您可以对段落进行悬挂缩进，只需设置
左侧填充
，并使用
文本缩进
拉出第一行：

HTML

.hangingindent {
    padding-left: 5em;
    text-indent: -5em;
}

只需设置
左侧填充
并使用
文本缩进
拉出第一行，即可对段落进行悬挂缩进：

HTML

.hangingindent {
    padding-left: 5em;
    text-indent: -5em;
}

哦，哇，facepalm，我让它变得更难了。。。你的解决方案非常有效，谢谢。哦，哇，facepalm，我让它变得更难了。。。您的解决方案非常有效，谢谢。
<p class="hangingindent">
    <b>Example 1:</b> A BruxZir bridge has 3 mm high x 3 mm wide connectors. 3 mm2 x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load in the oral environment, according to the Rule of 27.
<p>

.hangingindent {
    padding-left: 5em;
    text-indent: -5em;
}