相关疑难解决方法(0)

如何删除内联块元素之间的空格?

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
Run Code Online (Sandbox Code Playgroud)
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>
Run Code Online (Sandbox Code Playgroud)

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>
Run Code Online (Sandbox Code Playgroud)

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();
Run Code Online (Sandbox Code Playgroud)

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗?

html css

1014
推荐指数
20
解决办法
26万
查看次数

显示:内联块额外边距

我正在使用一些div设置为display: inline-block并且有一组height和的s width.在HTML中,如果每个后面都有一个换行符,则会div在div的右下角添加一个自动5px边距.

例:

<div>Some Text</div>
<div>Some Text</div>
Run Code Online (Sandbox Code Playgroud)

有没有我忽略的财产可以让我重置自动保证金?

更新

从我发现的,没有办法删除边距...除非你要么在同一行上有所有内容,或添加注释以注释掉换行符.例:

<div>Some Text</div><!--
--><div>Some Text</div>
Run Code Online (Sandbox Code Playgroud)

不是最好的解决方案,但如果您有多行,仍然更容易阅读.

html css xhtml

133
推荐指数
6
解决办法
14万
查看次数

标签 统计

css ×2

html ×2

xhtml ×1