0

我有两个相同的跨度，但由于某种原因，第二个显示得更窄。JSFiddle 现在已经关闭，所以这里有一个完整的 html 示例：

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
        <span style="background-color:#ccc; margin-right:0.125em;">
            &nbsp;&nbsp;&nbsp;
        </span>
    </body>
</html>

似乎最后一个总是更窄，但如果我添加更多跨度，它会变得更奇怪。第一个有时会有不同的宽度，其值介于宽的中间宽度和窄的最后一个之间。

我错过了什么？

4

3 回答 3

1

在第一个上插入一个额外的空间。如果所有跨度都是单行，则它按预期工作：

<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
        <span style="background-color:#ccc; margin-right:0.125em;">&nbsp;&nbsp;&nbsp;</span>
    </body>
</html>

你想归档什么？如果您希望所有跨度具有相同的长度，您应该在 CSS 中通过设置

span {
    display: inline-block;
    width: 2rem;
}
于 2013-11-08T12:07:05.233 回答
0

我认为原因，边距没有扩展父元素的宽度 http://jsbin.com/eHaNIR/1

于 2013-11-08T12:06:46.940 回答
0

问题是标签之间的空间。

不起作用：

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
</body>

效果很好：

<body>
  <span margin-right:0.125em;"> &bnsp; </span>
  <span margin-right:0.125em;"> &bnsp; </span>
  works well because of this text
</body>

如何破解它：

span:after {
  content: '';
  display: inline-block
}

如何正确修复它（缩小代码）：

<body><span margin-right:0.125em;"> &bnsp; </span><span margin-right:0.125em;"> &bnsp; </span></body>

带有附加文本的修复演示：http:
//jsbin.com/AFuPomI/1/edit

这也有帮助：
http ://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-11-08T12:06:48.240 回答