这些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。
当前回答
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
其他回答
我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:
span {
display: table-cell;
}
所以有很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距(根据元素的位置，可以是左边距或右边距)。
我将稍微扩展一下user5609829的答案，因为我认为这里的其他解决方案太复杂/工作量太大。对内联块元素应用margin-right: -4px将删除空格，所有浏览器都支持。在这里查看更新的小提琴。对于那些担心使用负边距的人，试着阅读一下这篇文章。
从内联块元素中移除空格，有很多方法:
字体大小为0 nav { 字体大小:0; ｝ 导航a { 字体大小:16 px; ｝ 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; ｝ 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >
这个问题最简单的答案是相加。
css
float: left;
代码依赖链接:http://jsfiddle.net/dGHFV/3560/
