我们都知道内联块元素之间的空白问题。例如:
.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文件。问题不是页面大小,而是元素中的空格。
答案 0 :(得分:4)
使用jQuery,您可以删除wrapper
元素的所有文本节点,如
$('.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;
答案 1 :(得分:1)
纯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>
答案 2 :(得分:0)
如果您担心全球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>