在我们实现导航栏的时候,经常要用到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,也可以解决这个问题,但是现在几乎没有浏览器支持,让我们展望未来吧。

关于li标签行内显示的问题的更多相关文章

  1. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  2. HTML5 结构性标签 行内语义性标签

    结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  3. html中 让 ul 的多个 li 在一行内显示

    有时候会需要ul的li都在同一行显示,避免li跑到下一行去,今天遇到了这个问题,记录下来,避免忘记~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  5. 前端css之文本操作及块级元素和行内元素

    1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red 1.2水平对齐方式 ...

  6. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  7. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  8. css块级标签,行内标签,行内块标签的转换(2)

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  9. CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

随机推荐

  1. 通用动态树(Link-Cut Tree)模板

    一个没有维护任何东西的动态树模板 忘了怎么写可以直接来粘 int ch[300010][2], fa[300010], st[300010]; bool lazy[300010]; bool nroo ...

  2. c#几种数据库的大数据批量插入(SqlServer、Oracle、SQLite和MySql)

    这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...

  3. SQL SERVER下有序GUID和无序GUID作为主键&聚集索引的性能表现

     背景 前段时间学习<Microsoft SQL Server 2008技术内幕:T-SQL查询>时,看到里面关于无序GUID作为主键与聚集索引的建议,无序GUID作为主键以及作为聚集索引 ...

  4. AVFoundation 文本播报

    #import <Foundation/Foundation.h> #import <AVFoundation/AVFoundation.h> @interface Speak ...

  5. UML类图和时序图符号

    看懂UML类图和时序图 https://www.cnblogs.com/me115/p/4092632.html 内容目录: 从一个示例开始 类之间的关系 时序图 附录:<图说设计模式> ...

  6. fork 炸弹

    一段古老的Linux shell程序 :() { :|:& };: 这是bash shell的写法,首先定义了一个函数:(),花括号里面是函数体,这里递归执行函数本身,通过管道在后台再递归运行 ...

  7. Python中lambda表达式

    一.lambda表达式形式 lambda后面跟一个或多个参数,紧跟一个冒号,以后是一个表达式.冒号前是参数,冒号后是返回值. lambda是一个表达式而不是一个语句. lambda表达式可以出现在Py ...

  8. Hibernate 环境配置和依赖添加(使用java web和普通javaSE工程)

    1.Hibernate依赖包的添加 File---->Project Structure,按照如图所示操作,导入所依赖的jar包. 2.生成hibernate.hbm.xml的配置文件 (1)点 ...

  9. C++_类入门4-String类

    很多应用程序都需要处理字符串.C语言在string.h(C++中为cstring)中提供了一系列的字符串函数,很多早期的C++实现为处理字符串提供了自己的类. string类是由头文件string支持 ...

  10. fis中的数据结构模块Config

    /* * config * caoke */ 'use strict'; Object.extend=function(props){ //继承父类 var prototype=Object.crea ...