li的宽度和高度的问题

用li来给菜单布局,所以li的属性中加了一句 display:inline;让其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。

Li,默认情况下,是块级元素,但我们给其加上了display:inline;使得其变为了内联元素。内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高。

在这个时候,如果我们要给li进行定义宽度和高度,我们就要用到float:left;(左浮动)

float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

<!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=gb2312" />

<title>有关于li…</title>

<style>

#test1 li{

display:inline;

background-color:black;

color:white;

font-size:12px;

width:120px;

height:20px;

padding:10px;

}

#test2 li{

display:inline;

float:left;

background-color:black;

color:white;

font-size:12px;

width:120px;

height:20px;

padding:10px;

}

</style>

</head>

<body>

<div id="test1"><li id="test1">测试li</li></div><br />

<div id="test2"><li id="test1">测试li</li></div><br />

<br />

<br />

<div style="float:left"><script src="copyright.js"></script></div>

</body>

</html>

加载评论框需要翻墙