“设置display:block-inline的li或div中添加文字后,导致li或div排版掉落、错位”的原因及解决方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/titoni_yunruohan/article/details/84455551
  •  情景

   在了解可以通过设置display:inline-block会将块级元素拥有inline元素一行排列的特性,那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列,这时候你可能说通过设置浮动float就可以解决,不着急,float的原理和实现作为补充内容会接着聊,那么接下来先通过效果图来看一下问题所在

代码展示(通过设置display将li元素行排列)

<!doctype html>
<html lang="en">
	<head>
		<style>
			*{margin:0;padding:0}
			body{background:#d2d2d2;}
			ul{
				width:1000px;
				height:200px;
				border:2px solid red;
				background:#ffffff;
				margin:100px auto;
			}
			li{
				display:inline-block;
				list-style:none;
				width:150px;
				height:150px;
				border:1px solid blue;
			}
		</style>
	</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

 效果图展示 (这个效果达到了自己想要的效果,所以接下来想要在li元素中添加内容进去)

所以这时候我的第一个li元素是这样的

	<ul>
		<li>你好</li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

 效果图 (😢想说这并不是本尊想实现的效果啊啊啊)


一、解释这种现象产生的原因

1.预备知识(display的属性设置为inline-block、inline和block会有什么区别)

  • inline       
  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • block
  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • inline-block
  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

2.预备知识(垂直对齐设置vertical-align)

  • 为当前元素设置垂直对齐方式,那我们首先就要明确有多少种方式可以选择(如果之前没有接触过vertical-align,看到这些选择可能会是懵的,别着急,继续往下看)

 这里我希望你认真看一下vertical-align的官方定义及使用标注,你会发现特别说明只有inline和inline-block元素才能设置

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length  
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
  • 解释一下 top middle base bottom ,这个是张鑫旭的一张图,想要通过我们小学的英文作业本来解释这个线的划分,暂时未发现更通俗易懂的解释

 

  • 预备知识baseline的定义

对于inline-block元素来说,他的基线取决于元素本身的特性,在该元素中没有行内子元素(DOM树的子元素,有块子元素不算但是块子元素中有行元素算)的时候或者overflow不为visible,该inline-block的基线为margin-bottom的下边界。否则,以该元素中最后一个行框子元素的基线为该元素的基线

  • 解释上述问题中第一个li元素会下移

  这里先做一个声明:说到底设置display为inline-block没错,错在浏览器的vertical-align的默认值为baseline

 由上面baseline的定义可知第一个li的baseline在哪 ,很明显就是下面这条绿色的线,如果不是很明白请多理解上面baseline的定义,接下来我想请你猜下一个li设置多行的文字效果会是什么样子的?如果上面的知识点你都懂,那么你应该明白了为什么会是右图

         

二、解决办法

  • 当然很明显的一个办法是为li设置vertical-align为top
  • 第二个方法是设置overflow设置为hidden
  • 第三个方法是干脆不设置display,直接设置float为left

三、设置float和display-inline的不同

  • float是一种脱离文档流的浮动,所以会对下面元素的布局产生影响
  • inline-block不会影响文档柳,所以不会影响下面的元素的布局
  • 各有千秋,下一篇博客聊聊俩者适用的场景
展开阅读全文

没有更多推荐了,返回首页