一站式外贸服务平台,软件工程开发流程,广东品牌网站制作公司,重庆做网站li 与 li 之间有看不见的空白间隔是什么原因引起的#xff1f;
浏览器会把inline内联元素间的空白字符#xff08;空格、换行、Tab等#xff09;渲染成一个空格。为了美观#xff0c;通常是一个li放在一行#xff0c;这导致li换行后产生换行字符#xf…li 与 li 之间有看不见的空白间隔是什么原因引起的
浏览器会把inline内联元素间的空白字符空格、换行、Tab等渲染成一个空格。为了美观通常是一个li放在一行这导致li换行后产生换行字符它变成一个空格占用了一个字符的宽度。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/style
/head
bodyulliItem 1/liliItem 2/liliItem 3/li/ul/body
/html
如何解决
1.为li设置float:left
不足有些容器是不能设置浮动如左右切换的焦点图等
li { float: left; }
2.将所有li写在同一行
不足代码不美观。
li { display: inline; }
3.将ul内的字符尺寸设为0
不足ul中的其他字符尺寸也被设为0需要额外重新设定其他字符尺寸且在Safari浏览器依然会出现空白间隔。
ul { font-size: 0; }
li { font-size: 16px; /* 重新设置字符尺寸 */ }
4.消除ul的字符间隔并将li的字符间隔设为默认
不足这也设置了li内的字符间隔因此需要将li内的字符间隔设为默认letter-spacing:normal。
ul { letter-spacing: -8px; }
li { letter-spacing: normal; }
