关于li标签行内显示的问题
2018-06-24 01:37:57来源：未知 阅读 ()
在我们实现导航栏的时候，经常要用到ul标签。
通常，我们是通过给li标签设置display：inline-block来使其在一行里显示，但是这个时候出现了一个很头疼的问题。
我们先上代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } html { font-size: 62.5%; } nav { width: 100%; line-height: 3rem; background-color: blue; padding: 0 1.5rem; } ul { text-align: left; } li { display: inline-block; background-color: red; padding: 0 1.5rem; } </style> </head> <body> <nav> <ul> <li>登录</li> <li>关于</li> <li>注册</li> <li>帮助</li> <li>退出</li> </ul> </nav> </body> </html>
将页面放大以后我们发现，每个li标签的后面都出现了一点点间隙。这是为什么呢？
问题的原因所在
笔者写过一篇关于DOM的文章，在叙述节点分类的时候提到，Chrome、opera等浏览器中，把节点与节点之中的空白符（即空格）也视为文本节点。
如图所示，写html代码时为了美观，写完每个li标签都会换行，换行的时候就会产生空白符。
如何解决这个问题呢？
1.写html代码时，把所有li标签写在一行里，从根上消除空白符，但是这样影响代码阅读，不易于后期维护。
<body> <nav> <ul> <li>登录</li><li>哈哈</li><li>嘿嘿</li><li>帮助</li><li>退出</li> </ul> </nav> </body>
2.还有一个很有意思的方式，就是li标签不闭合，让其自动补全，也是可以清除空白。
<body> <nav> <ul> <li>登录 <li>哈哈 <li>嘿嘿 <li>帮助 <li>退出 </ul> </nav> </body>
3.还可以给li标签一个负边距来抵消空白符的宽度，但是有一个缺点，就是空白符的大小跟父节点ul标签有关，而ul标签又跟浏览器有关，所以负边距的大小不好确定。
<style> li{margin-left:-3px;} </style>
4.既然空白符大小跟ul标签有关，那我们可以把ul标签的字体大小设置为0，再给li标签设置实际字体大小，这样就可以使空白符的大小为0。
<style> ul{font-size：0;} li {font-size : 1.2rem;} </style>
5.css4草案中有一个新增属性：white-space-collapsing，也可以解决这个问题，但是现在几乎没有浏览器支持，让我们展望未来吧。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- HTML基础01 2020-06-07
- 前端学习记录 2020-06-05
- [03]HTML基础之行内标签 2020-06-01
- HTML 5的革新——语义化标签section和article的区别 2020-06-01
- [05]HTML基础之表格标签 2020-06-01
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
