这些span元素之间将有一个4像素宽的空间:

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; } < p > <span> Foo </span> <span> Bar </span> < / p >

小提琴演示

我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:

<p>
  <span> Foo </span><span> Bar </span>
</p>

我正在寻找一个CSS解决方案,不涉及:

修改HTML。 JavaScript。


当前回答

使用PHP括号:

申力 显示屏:inline-block; 的 <德> < li > 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < ? > < li > ? 第一< / div > < div > < / li > < /德>

其他回答

p { 显示:flex; } 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; } < p > <span> hello </span> <span> world </span> < / p >

字体大小:0;管理起来可能有点棘手…

我认为下面的几行代码比其他任何方法都更好,更可重用,更节省时间。我个人使用这个:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

那么你可以这样使用它…

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

据我所知(我可能错了),但所有浏览器都支持这个方法。

解释:

这工作(也许-3px可能更好)完全按照您的预期工作。

复制并粘贴代码(一次) 然后在HTML中,只需在每个内联块的父类上使用class="items"。

您将不需要回到css,并为您的新内联块添加另一个css规则。

同时解决两个问题。

还要注意>(大于号),这意味着*/all子元素应该是内联块。

http://jsfiddle.net/fD5u3/

注意:我已经进行了修改,以适应当包装器有子包装器时继承字母间距。

为什么不像这样……有点粗糙,取决于你的CSS单元代码,但是:

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}
<span>...</span><span class="my-span"></span>

2021的解决方案

不幸的是,空白折叠仍然没有实现。

同时,给父元素font-size: 0;然后设置子字体的字体大小。这应该能奏效

这个问题最简单的答案是相加。

css

float: left;

代码依赖链接:http://jsfiddle.net/dGHFV/3560/