在我们实现导航栏的时候，经常要用到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. 关于VisualStudio性能分析数据中的独占样本数和非独占样本数的意义

    VisualStudio中自带有Profile工具进行性能性能分析,其中用得比较多的数据是函数调用时间,它主要有独占样本数和非独占样本数两个指标,关于这两个指标代表的意义,MSDN的解释比较文艺: 非 ...

  2. 5、用Numpy实现结构体

    1.结构数组: 在C语言中我们可以通过struct关键字定义结构类型,结构中的字段占据连续的内存空间,每个结构体占用的内存大小都相同,因此可以很容易地定义结构数组.和C语言一样,在NumPy中也很容易 ...

  3. 网络瓶颈、线程死锁、内存泄露溢出、栈堆、ajax

    网络瓶颈:网络传输性能及稳定性的一些相关元素 线程死锁:多个线程因竞争资源造成的一种僵局 下面我们通过一些实例来说明死锁现象. 先看生活中的一个实例,2个人一起吃饭但是只有一双筷子,2人轮流吃(同时拥 ...

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

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

  5. LeetCode154.寻找旋转排序数组中的最小值 II

    154.寻找旋转排序数组中的最小值 II 描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). ...

  6. 【算法笔记】B1008 数组元素循环右移问题

    1008 数组元素循环右移问题 (20 分) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A​0​​A​1​​⋯A​N ...

  7. [USACO12FEB]牛的IDCow IDs 一题多解（求二进制中有k个1 ，第n大的数)

    题目: FJ给他的奶牛用二进制进行编号,每个编号恰好包含K 个"1" (1 <= K <= 10),且必须是1开头.FJ按升序编号,第一个编号是由K个"1&q ...

  8. [转] JAVA从本机获取IP地址

    [From] https://www.cnblogs.com/xiaoBlog2016/p/7076230.html 论述: 此篇博客是在工作的时候,需要获得当前网络下面正确的ip地址,在网上查阅很多 ...

  9. hdu 1237 简单计算器（栈处理）

    简单计算器 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. 【网络】默认路由、RIPv2、OSPF、EIGRP配置（全网全通）

    1:默认路由 遇到问题:给r2配置向右的单项默认路由,通过PC1去ping主机PC2,一直显示Request timed out, 解决方法:r2配置如下: r2(config)#ip route 0 ...