这些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。


当前回答

使用flexbox,并为旧浏览器做一个回退(从上面的建议):

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

其他回答

只是为了好玩:一个简单的JavaScript解决方案。

document.querySelectorAll (.container) .forEach(清晰); 函数clear(element) { element.childNodes。forEach(检查、元素); } 功能检查(项){ 如果项目。nodeType === 3) this. removecchild (item); } 跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; } < p class = "容器" > <span> Foo </span> <span> Bar </span> < / p >

使用PHP括号:

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

另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):

词间距:-100%;

从理论上讲,它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%,即到 零。但不幸的是,似乎在任何地方都行不通,还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。

词间距:1 ch;

它将字间距缩短为数字“0”的宽度。在单空格字体中,它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+, Chrome 27+,几乎适用于Internet Explorer 9+。

小提琴

我不太确定你是否想要创建两个没有间隙的蓝色跨度,或者想要处理其他空白,但如果你想删除间隙:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

和完成。

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在,因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以,在我的情况下,我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异,所以,我认为这是一个解决方案。