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

Posted 2023-03-05

【中文标题】当 span 有一些边距时，文本对齐受到干扰

【英文标题】：Text alignment disturbed when span have some margin

【发布时间】：2014-07-29 17:46:27

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

Working fiddle

【参考方案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;

【讨论】：

我认为它不起作用，您能否提供一个示例工作小提琴。对我来说，它看起来像 - jsfiddle.net/3DbUS/17 并且测试与上述跨度不一致。

添加margin-left:100px;到 span.ans

好的，但是输出是jsfiddle.net/3DbUS/20。您可以在小提琴中看到文本从第二行开始（span.ans 文本没有开始，就在 span.que 文本之后）。

是的，你是。但它希望我的 span.ans 文本在 sapn.que 文本之后开始，例如我不希望文本看起来像这样jsfiddle.net/3DbUS/21。你能帮我实现这一目标吗？

正如提问者所说，他无法更改html代码