<!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>