Question

我正在尝试使用此Javascript代码删除内联块之间的空白区域。

$.fn.removeSpace = function(){
this.contents().filter(function() {
    return this.nodeType === 3;
}).remove();
};
$('.Container').removeSpace();

<div class="Container">
  <div class="what">
    <ul class="lolers">
      <li class="lol">Test</li>
      <li class="lol">Test 2</li>
      <li class="lol">Test 3</li>
    </ul>
  </div>
</div>

如果我将$('.Container')设置为$('.lolers')，则正确划分空格。如果它被设置为.what，它也不会剥离它。

编辑：抱歉不包括这个问题。如何让javascript代码遍历所有内容并删除空白？

Answer 1

编辑：有人向我指出font-size：0;方法在Safari和Android上都有一些。我被指向了这篇文章http://css-tricks.com/fighting-the-space-between-inline-block-elements/

你也可以让它们成块并向左漂浮。这是我的小提琴示例。

http://jsfiddle.net/ivanjsfiddle00/a4nu8arz/6/

HTML

<div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="second">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div div {
    background: #000;
    height: 100px;
    width: 100px;
    display: block;
    float: left;
    }

#second {
    clear: left;
}

ORIGINAL POST：为什么要使用javascsript删除空格？据我所知，当你将元素显示为内联块时，父元素会留下文本空间。基本上，我读过的是图像以这种方式显示，因此内联块默认为字幕文本留出空间。将父元素的font-size设置为零。这是我的小提琴示例。

http://jsfiddle.net/ivanjsfiddle00/a4nu8arz/2/

HTML

<div id="first">
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div div {
    background: #000;
    height: 100px;
    width: 100px;
    display: inline-block;
}
    #first {
    font-size: 0;
}

使用javascript删除内联块中的空格

1 个答案: