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就自动移到下面去了,这是什么原因呢。
有几个问题:
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 元素, 而只是文本所需的高度.
谢谢各位啊啊
上一篇: CSS 文本装饰样式 垂直对齐