我遇到了一个我以前从未注意到的奇怪问题。我有以下代码:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
<a href="#">Yes</a>
</li>
<li>
<a href="#">No</a>
</li>
<li>
<a href="#">No</a>
</li>
</ul>
</div>
非常简单的代码块。忽略第二个否,因为它实际上只是给我第三个 li
来帮助我解决这个问题。现在,这是 CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
现在,这是正在发生的事情:
看到似乎不知从何而来的额外间距了吗?我移动到 border-right
只是为了测试它,结果更加不一致:
现在,第 3 个 LI 有 0 个 padding
和 margin
,这是应该的。另外两个还有空余空间。
最后,浏览器理解 li
的正确 height
和 width
,并且没有属性 margin
或padding
到它。根据浏览器,文本应该在边框上被粉碎,正如我所期望的那样。
谁能解释一下文本右侧额外的 3-5 像素间距是什么?
最佳答案
那是因为换行符在 HTML 中被视为空格。您已将内部元素指定为 inline-block
,这意味着显示它们之间的空格。
您可以:
- 将父级的字体大小设置为 0,然后在
<li>
上恢复正常, - 简单地消除
<li>
之间的换行符s.
存在第三个(较小的)选项,它是使用 float
.
float
最初是为了允许将元素推到容器的边缘,同时让文本在其周围自由流动(如报纸中的图像)。当人们发现它会使 block 级元素水平堆叠时,该功能也被利用用于布局。
使用 float
意味着你需要 clear
在你自己之后,通过使用 clearfix ,或具有 clear: both
的元素设置它。
这个选项较少,因为它很像表格布局,它不是 float
的初衷,实现可能因浏览器和时间段而异,但最重要的是,它增加了清算的开销问题。 (如果可以的话,请坚持使用 display: inline-block
!)
关于html - 为什么浏览器向我的 LI 中注入(inject)空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13711496/