显示：inline-block

时间：2023-04-05 21:03:06 HTML5

今天的励志话语，追不过去，未来依旧可期。祝大家2019年的过去和未来的差距，我们来创建一个导航列表，列表项设置为inline-block，主要代码如下：我

.nav{背景：#999;}。导航项{显示：内联块；/*设置为内联块*/width:100px;background:#ddd;}效果图如下：从效果图中我们可以看出列表项之间有一个小的间隙，但是我们没有在代码中设置margin水平间距。那么这个差距是怎么来的呢？这是因为我们写代码的时候，输入空格和换行会产生空格。浏览器不会忽略空白字符，对于多个连续的空白字符，浏览器会自动合并为一个，所以产生了所谓的间隙。对于上面的例子，我们为了方便阅读，在列表项元素之间输入了一个回车和换行，而这个空隙正是这个回车和换行产生的空白。同样对于所有行内元素（inline、inline-block），换行符会在空白处产生间隙。如何消除空白字符从上面我们知道，空白字符是浏览器的正常行为。但是对于一些场景来说，它并不美观，而且缝隙的大小是不可控的，所以我们往往需要去掉这个空白缝隙。一般来说，我们有两种方法来去除换行造成的空隙：代码不换行和设置font-size。代码不换行。我们理解换行符是由于换行空格而产生的，所以我们可以把上面例子中的列表项写成一行，这样空格就消失了，空隙也就不复存在了。代码如下：

导航导航Navigation但是考虑到代码的可读性和可维护性，我们一般不建议写成一行。设置font-size，首先要明白空白归根结底就是字符。因此，我们可以通过设置font-size属性来控制产生的间隙的大小。我们知道，如果把font-size设置为0，文本字符是无法显示的，那么空白文本也就没有了，空隙也没有了。于是顺着这个思路，又有一个解决方案：通过将父元素的font-size设置为0来消除空隙，然后重新设置子元素的font-size，恢复子元素的文字字符。所以方法代码如下：.nav{background:#999;字体大小：0；/*空白字符大小为0*/}.nav-item{display:inline-block;宽度：100px；字体大小：16px；/*resetthefont-sizeto16px*/background:#ddd;}使用该方法时需要特别注意其子元素的font-size，否则容易掉坑（文字无法显示）。对齐问题由于inline-block是行内级元素，vertical-align属性也适用于它。在正式讲解vertical-align之前，我们需要说一下一些基本概念。中线、基线、顶线、底线中线（middle）、基线（baseline）、顶线（text-top、底线（text-bottom））是文本的几条基本线，它们对应的位置如下如下：baseline（基线）：小写英文字母x的下边缘。中线：小写英文字母x的中间。顶行（text-top）：父元素font-size大小组成的内容区域的顶行底行（text-bottom）：由父元素的大小font-sizevertical-align只接受8个关键字，一个百分比值或一个长度值。接下来我们将看看每个关键字如何作用于行内元素。baseline默认元素的基线与父元素的基线对齐。sub将元素的基线与其父元素的下标基线对齐。super将元素的基线与其父元素的上标基线对齐。text-top将元素的顶部与父元素字体的顶部对齐。text-bottom将元素的底部与父元素字体的底部对齐。middle将元素的中间对齐到基线加上父元素x高度的一半。top将元素及其后代的顶部与整行的顶部对齐。bottom将元素及其后代的底部与整行的底部对齐。将元素的基线对齐到其父元素基线以上的给定长度。与值一样，百分比是行高属性的百分比。打开微信，扫一扫关注早都君，每天早上为你推送前端知识，打发地铁公交拥挤的时光

上一篇：SAPUI5新手教程之十二——使用CSS类进一步美化UI试用版

下一篇：前端日常实践：93#视频演示纯CSS制作闪电连接线

显示：inline-block相关文章