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

鸣鸣Amadues 2015-07-26 10:05:58

		<nav>

		<ul>

		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>	

		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>

		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>

		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>

		</ul>

		</nav>

nav ul li

{

	float: left;

	width: 72px;

	display: inline;

}



nav li a { display:block;}

上面是html，css和效果图

...全文

535 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

鸣鸣Amadues 2015-07-28

打赏
举报

谢谢各位啊啊

sydhr_1994 2015-07-27

打赏
举报

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

李尸尸 2015-07-27

打赏
举报

引用 1 楼 Raffin 的回复:

有几个问题： 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，肯定就换行了

neorobin 2015-07-27

打赏
举报

<!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" />FL</a></li>
<li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li>
<li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li>
<li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />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>

风中的那一缕头发 2015-07-27

打赏
举报

displayinline 是为了解决IE的BUG的

鸣鸣Amadues 2015-07-26

打赏
举报

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