css - 当 span 有一些边距时，文本对齐会受到干扰

Question

我在页面上有两个 span。我想垂直对齐这些内容，但问题是我的第一个 span 有一些边距。并且第二个span的内容太长，所以，第二个span的文本与上面的span不对齐。请看Jsfiddle .

在 Fiddle 中:我的第一个跨度有 100px 边距，您可以看到第二个跨度与第一个不对齐。

如何使用 CSS 垂直对齐两个跨度文本。

注意:我无法更改 HTML 结构。请不要建议我这样做。

在真实场景中:我有很多 block 没有任何父容器，每个 block 跨度都有不同的边距。参见 Sample Fiddle .我希望每个 block second span 与其上方的 span 对齐。

任何帮助将不胜感激...!!!

Answer 1

制作span.ans display:inline-block，默认情况下span是内联的，这意味着它不能有边距或填充或宽度或高度(它只是围绕着内容)。其次，您需要添加 margin-left: 以及前一个 span 的边距值。

Working fiddle