float:left和display:inline一起用是什么意思？_html/css

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

		<nav>		<ul>		<li><a href="#"><img  src="/static/imghw/default1.png"  data-src="images/flower.png"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/flower.png"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/flower.png"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/flower.png"  class="lazy"      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就自动移到下面去了，这是什么原因呢。

因为是个内联元素，与div不同，div是个块，display:block 是定义块（两者你看的到的区别就是换行会不会被解析）。你第一个块可以去掉左浮动，可以加到下面。关于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="/static/imghw/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghw/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghw/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="float:left和display:inline一起用是什么意思？_html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghw/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / 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