这些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。
当前回答
字体大小: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/
注意:我已经进行了修改，以适应当包装器有子包装器时继承字母间距。
其他回答
使用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;
margin-right: -3px;
}
工作演示:http://jsfiddle.net/dGHFV/2784/
添加字母间距:4 px;在父CSS上添加letter-spacing:0px;到生成空间css。
跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; vertical-align:底部; 字母间距:0 px; ｝ p { 字母间距:4 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >
