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


当前回答

CSS Text Module Level 4规范定义了一个Text -space-collapse属性,它允许控制元素内部和周围的空白如何处理。

所以,关于你的例子,你只需要这样写:

p {
  text-space-collapse: discard;
}

不幸的是,在HBP回答的评论中提到,目前还没有浏览器实现这个属性(截至2016年9月)。

其他回答

我认为有一个非常简单/古老的方法,所有浏览器都支持,甚至是IE 6/7。我们可以简单地在父元素中将字母间距设置为一个较大的负值,然后在子元素中将其设置为正常值:

body { font-size: 24px } span { border: 1px solid #b0b0c0; } /* show borders to see spacing */ .no-spacing { letter-spacing: -1em; } /* could be a large negative value */ .no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */ <p style="color:red">Wrong (default spacing):</p> <div class=""> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="no-spacing"> <span>Item-1</span> <span>Item-2</span> <span>Item-3</span> </div>

我将稍微扩展一下user5609829的答案,因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用margin-right: -4px将删除空格,所有浏览器都支持。在这里查看更新的小提琴。对于那些担心使用负边距的人,试着阅读一下这篇文章。

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

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

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

css

float: left;

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

每个问题,试图删除内联块之间的空间似乎像一个<table>给我…

试试这样做:

p { 显示:表; } 跨度{ 宽度:100 px; 边框:1px实心银;/*仅用于可视化*/ 显示:表格单元; } < p > <span> Foo </span> <span> Bar </span> < / p >