float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:40:011806浏览
<nav> <ul> <li><a href="#"><img src="images/flower.png" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="images/flower.png" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="images/flower.png" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li> <li><a href="#"><img src="images/flower.png" style="max-width:90%" style="max-width:90%" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li> </ul> </nav>
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的
<!DOCTYPE html><html><head><style>nav ul li{ float: left; /* width: 72px; *//* 72 - 68 = 4px 不够容纳后面文字的宽度了, 会把文字挤到下一行 */ width: 120px; /* 120 - 68 = 52px 如果足够容纳后面文字的宽度, 就不会把文字挤到下一行 */ display: inline;}nav li a { /* display: block; */}nav li a:hover { /* 在 a 有或者无 display: block; 时分别查看 a 显示出的形状和尺寸 */ background-color: red; border: 3px blue solid;}nav li a img{ width: 68px; height: 54px;}</style></head><body><nav><ul><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li></ul></nav>如果没有 float: left; 此处这些文字将在所有的 li 元素下面换行显示, 否则将接在最后一个 li 元素的右边显示<br><br>li 的默认 display 属性是 list-item, 这个属性一是让 li 象 block 元素一样是矩形形状, 并且独占一行, 另外还在它之前有一个 marker box, 默认样式下, 这个 marker box 会是显示为一个黑圆点<br><br>li {display: inline} 让 li 不再独占一行, 宽度上只会得到必要的而不是占有所在容器的全宽,另外也去掉了 marker box.<br><br>display: block 让一个元素显示成矩形, 在尺寸是 auto 时, 浏览器会给它分配足够的 height 和 width 以容纳它的内部无素.<br><br>a 元素默认是一个 inline 元素, 不保证始终是一个矩形, 此例中, 浏览器自动计算的高度可能会不够容纳内部的 img 元素, 而只是文本所需的高度.</body></html> 谢谢各位啊啊
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn