<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>浮动5-常用列表显示(案例)</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#listUL{
overflow:hidden; /* 块状元素：当内部为浮动元素时，加此属性使其高度自适应 */
margin:0px;
padding:0px;
border:1px solid red;
}
#listUL li{
list-style:none;
float:left;
border:1px solid #ccc;
margin:3px 2px; /* 设置间距 */
}
#listUL li.tagLi{
width:100px;
text-align:right;
clear:left; /* 此处加一个清除浮动，有效解决串行问题~~~~~ */
}
#listUL li.titleLi{
width:400px;
}
</style>
</head>
<body>
<ul id="listUL">
<li class="tagLi">姓名：</li><li class="titleLi">请填写您的姓名.......</li>
<li class="tagLi">邮箱：</li><li class="titleLi">请填写您的邮箱@@@</li>
<li class="tagLi">地址：</li><li class="titleLi">请填写您的地址###.....</li>
</ul>
</body>
</html>
