当跨度有一些余量时，文本对齐会受到干扰

Question

我在页面上有两个span。我想垂直对齐这些内容，但问题是我的第一个span有一些余地。并且第二个span的内容太长，因此，第二个span的文字与上述span不一致。请参阅Jsfiddle。

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

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

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

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

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

Answer 1

你可以试试这个

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

Answer 2

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

Working fiddle