Question

我们都知道内联块元素之间的空白问题。例如：

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

我认为最好的解决方案是删除元素之间的任何空格：

.wrapper div {width:100px; height:30px; display:inline-block; border:1px solid #333;}

<div class="wrapper">
    <div>
    </div><div>
    </div><div>
    </div><div>
    </div>
</div>

我们可以使用javascript / jQuery在现成的HTML上执行此操作，例如将脚本添加到第一个代码段以表现得像第二个代码吗？某种$('.wrapper').minify();函数。

修改

有人建议可能与How to minify HTML with CSS and Javascript?重复。这个问题是通过编辑服务器端的文件来减少页面大小。在这里，我正在寻找一种解决方案，在传输内容后缩小特定元素，而无需编辑html文件。问题不是页面大小，而是元素中的空格。

Answer 1

使用jQuery，您可以删除wrapper元素的所有文本节点，如

＆＃13;

$('.wrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).remove();

＆＃13;

.wrapper div {
  width: 100px;
  height: 30px;
  display: inline-block;
  border: 1px solid #333;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 2

纯CSS方法是将父元素的0设置为.wrapper div { width:100px; height:30px; display:inline-block; border:1px solid #333; } .wrapper { font-size: 0; }

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div id="maindiv">
<ul style="text-align: center;list-style-type: none;margin: 1;padding: 0;display:inline-block;">

<!-- ALL CODE INSIDE DIV -->

</ul>
</div>

Answer 3

如果您担心全球font-size，那么您可以尝试使用评论

.wrapper div 
{
  width:100px; 
  height:30px; 
  display:inline-block; 
  border:1px solid #333;
}

<div class="wrapper">
       <div></div><!--
    --><div></div><!--
    --><div></div><!--
    --><div></div>
</div>

使用javascript处理内联块空间

3 个答案: