欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

float:left和display:inline一起用是什么意思?_html/css_WEB-ITnose

程序员文章站 2022-04-27 08:13:36
...
		


nav ul li{	float: left;	width: 72px;	display: inline;}nav li a { display:block;}




上面是html,css和效果图


回复讨论(解决方案)

有几个问题:
1,为什么li里float left和display inline同时使用?感觉作用是差不多的。网上了解下,li是个半block元素,是不是跟这个有关系?
2,a里为什么要display: block,而且去掉后效果似乎也没什么改变。
3,文字“FL”本来和图片是并排的,css里设置width变成72px后,FL就自动移到下面去了,这是什么原因呢。

因为 是个内联元素,与div不同,div是个块,display:block 是定义块(两者你看的到的区别就是换行会不会被解析)。你第一个块可以去掉左浮动,可以加到下面。关于FL被挤出你应该升入的去了解一下浮动。我也是刚刚入学前端的,我们可以相互学习。

有几个问题:
1,为什么li里float left和display inline同时使用?感觉作用是差不多的。网上了解下,li是个半block元素,是不是跟这个有关系?
2,a里为什么要display: block,而且去掉后效果似乎也没什么改变。
3,文字“FL”本来和图片是并排的,css里设置width变成72px后,FL就自动移到下面去了,这是什么原因呢。



第一个:好像见过,不是前端,但是了解过一些,dispaly:inline;IE6盛行时,这一行解决很多兼容问题。
第二个:display:block;是让以块的显示展现,不是没有变化,你background一下,加与不加区别是很大的。
第三个:你定义了li的宽度是72,而图片宽度是68,FL也是占位置的,假如说你设定的font-size是10px的话,那么图片加上FL的宽度就达到88,超过了你定义的72,肯定就换行了

float之后 display:inline 是解决ie6 产生双倍边距的问题

displayinline 是为了解决IE的BUG的

如果没有 float: left; 此处这些文字将在所有的 li 元素下面换行显示, 否则将接在最后一个 li 元素的右边显示

li 的默认 display 属性是 list-item, 这个属性一是让 li 象 block 元素一样是矩形形状, 并且独占一行, 另外还在它之前有一个 marker box, 默认样式下, 这个 marker box 会是显示为一个黑圆点

li {display: inline} 让 li 不再独占一行, 宽度上只会得到必要的而不是占有所在容器的全宽,另外也去掉了 marker box.

display: block 让一个元素显示成矩形, 在尺寸是 auto 时, 浏览器会给它分配足够的 height 和 width 以容纳它的内部无素.

a 元素默认是一个 inline 元素, 不保证始终是一个矩形, 此例中, 浏览器自动计算的高度可能会不够容纳内部的 img 元素, 而只是文本所需的高度.

谢谢各位啊啊