我对 HTML 最大的不满是换行符在元素之间增加了一点点空间。(jsFiddle。)
这可能会破坏子元素的大小以完全适合其父元素的布局。
我在某处读到,您可以通过使用如下注释删除此隐式填充 - 同时仍保持代码清晰易读:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
这行得通,但我觉得必须有更好的解决方案。还有哪些其他方法可以解决换行符填充?
我对 HTML 最大的不满是换行符在元素之间增加了一点点空间。(jsFiddle。)
这可能会破坏子元素的大小以完全适合其父元素的布局。
我在某处读到,您可以通过使用如下注释删除此隐式填充 - 同时仍保持代码清晰易读:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
这行得通,但我觉得必须有更好的解决方案。还有哪些其他方法可以解决换行符填充?
这不是“一点点空间”,而是字面上的空间字符。您正在使用display: inline-block
水平对齐元素,这就是“内联”的工作方式。
如果要使用inline-block
,则需要在执行此操作时删除元素之间的空白。
否则,您可以使用其他方法之一进行水平对齐,例如浮动或display: table-cell
.
一个解决方案是在发布页面之前使用一些 HTML 压缩器从标记中删除不需要的空间,就像在这个例子中一样。
但从我所见,他们往往至少会留下一个空格,因为他们不知道你是否真的想要那个空间,而且由于浏览器只考虑第一个空格(如果有多个),因此压缩器会离开一个空间。
你应该试试 font-size:0px; line-height:0px 用于外部 div。
像这样的东西:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
这是因为您使用display: inline-block;
了div
元素。
块元素会去除它们周围的空白,而内联元素则不会。
试试float: left;
吧。