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

Question

我在页面上有两个span。我想垂直对齐这些内容，但问题是我的第一个 span 有一些边距。而第二个span的内容太长，所以第二个span的文字与上面的span不一致。请参阅Jsfiddle。

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

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

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

在真实场景中：我有很多没有任何父容器的块，每个块跨度都有不同的边距。见Sample Fiddle。我希望每个块 second span 与它上面的跨度对齐。

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

Answer 1

制作span.ansdisplay:inline-block，默认情况下跨度是内联的，这意味着它不能有边距或填充或宽度或高度（它只是环绕内容）。其次，您需要将margin-left: 与上一个跨度的边距值相加。

Working fiddle

Answer 2

你可以试试这个

span.que{
  margin-left: 100px;
  margin-right: 10px;
  display: inline;
}
span.ans{
  display: inline-block;
  text-indent: 142px;
  margin-left: 100px;
  margin-top: -20px;
}