float:left与display:block的区别。

yfn2006 2011-10-14 02:29:30



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

*{margin:0; padding:0; }

li {display:inline;} 

li a {

float:left;或者display:block;

background:#ddd;

border:solid 1px red;

} 

</style>

<body>

<ul> 

<li><a href="/">List item 1</a></li> 

<li><a href="/">List item 2</a></li> 

<li><a href="/">List item 3</a></li> 

</ul> 

</body>

</html>

我原以为我写的无序列表可以不用换行，横排一行。但是应用了display:block，就自动换行了，但是我把li设置了display:inline;不应该出现这种情况啊，请问高手这是什么原因呢？

...全文

330 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

XX0604 2011-10-14

打赏
举报

float:left 是左浮动（可以把一些块放在一行）
display:block 是块元素化

king_lyly 2011-10-14

打赏
举报

float 内联元素后据有了块属性的一个性质可以设宽度，但浮动后是随内容宽度改变的不会占满屏
display是让他变为了块属性，块属性默认是一行的（满屏的）

光曰不日 2011-10-14

打赏
举报

[Quote=引用 5 楼 yfn2006 的回复:]

引用 3 楼 yfn2006 的回复:

楼主：既然li设置了display：inline为内联元素，其中的块状元素也应该有内敛元素的特性，所以我想想应该是横着排的，但是把a设置了display:block出乎我的意料。

楼主这么想：既然li设置了display：inline为内联元素，所以不管里面是什么元素，li整体应该是横着排。高手怎么解释？
[/Quote]写个代码推翻楼主的‘常识’：
<span>123<br>456</br></span><span>789</span>
注：span br 是天生的inline类型，上面其实是简单的文档流，应该对楼主有启发

yfn2006 2011-10-14

打赏
举报

[Quote=引用 3 楼 yfn2006 的回复:]

楼主：既然li设置了display：inline为内联元素，其中的块状元素也应该有内敛元素的特性，所以我想想应该是横着排的，但是把a设置了display:block出乎我的意料。
[/Quote]
楼主这么想：既然li设置了display：inline为内联元素，所以不管里面是什么元素，li整体应该是横着排。高手怎么解释？

光曰不日 2011-10-14

打赏
举报

块级元素也是也是在文档流里的，且前后有换行符，现在li被楼主你改成了行内元素，也进了文档流，a也在文档流，因此结果就类似是<li>...<a></a><br></li><li>...的效果咯，当然换行。正确的做法是li加float样式，我的理解，错误勿喷。

yfn2006 2011-10-14

打赏
举报

楼主：既然li设置了display：inline为内联元素，其中的块状元素也应该有内敛元素的特性，所以我想想应该是横着排的，但是把a设置了display:block出乎我的意料。

beyond_me21 2011-10-14

打赏
举报

把将li要设为float:left
至于li a是不是display:block都不会影响li是否横排显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{margin:0; padding:0; }
li {display:inline;float:left}
li a {
display:block;
background:#ddd;
border:solid 1px red;
}
</style>
<body>
<ul>
<li><a href="/">List item 1</a></li>
<li><a href="/">List item 2</a></li>
<li><a href="/">List item 3</a></li>
</ul>
</body>
</html>