这些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。
当前回答
我发现的另一种方法是将margin-left作为除行第一个元素外的负值。
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
其他回答
为什么不像这样……有点粗糙，取决于你的CSS单元代码，但是:
.my-span {
position: relative;
left: -1em;
width: 1em;
}
<span>...</span><span class="my-span"></span>
使用flexbox，并为旧浏览器做一个回退(从上面的建议):
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
通常我们在不同的行中使用这样的元素，但在display:在同一行中使用标签的内联块将删除空格，但在不同的行中则不会。
在不同的行中有标签的例子:
P跨度{ 显示:inline-block; 背景:红色; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
标签在同一行的示例
P跨度{ 显示:inline-block; 背景:红色; } < p > <span> Foo </span><span> Bar </span> < / p >
另一种有效的方法是CSS作业，对父元素使用font-size:0，并根据需要给子元素赋予font-size。
p { 字体大小:0; ｝ P跨度{ 显示:inline-block; 背景:红色; 字体大小:14 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >
上述方法可能在某些地方不起作用，这取决于整个应用程序，但最后一种方法是这种情况的万无一失的解决方案，可以在任何地方使用。
在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>
我发现的另一种方法是将margin-left作为除行第一个元素外的负值。
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
