马丁传奇

导航

浮动5-常用列表显示(案例) 

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

 

 

posted on 2013-08-17 17:07  马丁传奇  阅读(394)  评论(0)    收藏  举报