这些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。
当前回答
所有用于显示的空间消除技术:内联块是讨厌的hack…
使用Flexbox
它很棒，解决了所有的内联块布局问题，截至2017年有98%的浏览器支持(如果你不关心旧的ie，更多)。
我们准备好使用Flexbox了吗? 使用CSS灵活的盒子- Web开发人员指南| MDN Flexbox | CSS-Tricks的完整指南 Flexy Boxes - CSS flexbox游乐场和代码生成工具
其他回答
在CSS中有一个简单的解决方案。例如:
HTML
<p class="parent">
<span class="children"> Foo </span>
<span class="children"> Bar </span>
</p>
CSS
.parent {
letter-spacing: -.31em;
*letter-spacing: normal;
*word-spacing: -.43em;
}
.children {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
}
在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。
你可以在这个链接中检查这个框架。享受:)
.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>
使用其中一个技巧
删除空格 消极的保证金 跳过结束标签(HTML5不在乎) 将字体大小设置为0(字体大小为0的空格是…零宽度) 使用flexbox
请看下面的代码:
body { font-family: sans-serif; font-size: 16px; } ul { list-style: none } li { background: #000; display: inline-block; padding: 4px; color: #fff; } ul.white-space-fix li { margin-right: -4px; } ul.zero-size { font-size: 0px; } ul.zero-size li { font-size: 16px; } ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } original... <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Funky code formatting... <ul> <li> one</li><li> two</li><li> three</li> </ul> Adding html comments... <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> CSS margin-right: -4px; <ul class="white-space-fix"> <li>one</li> <li>two</li> <li>three</li> </ul> Omitting the </li> <ul> <li>one <li>two <li>three </ul> fixed with font-size: 0 <br><br> <ul class="zero-size"> <li>one</li> <li>two</li> <li>three</li> </ul> <br> flexbox <br> <ul class="flexbox"> <li>one</li> <li>two</li> <li>three</li> </ul>
我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:
span {
display: table-cell;
}
使用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 >
