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

最新推荐文章于 2023-03-23 11:46:06 发布

weixin_30270561

最新推荐文章于 2023-03-23 11:46:06 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/martinzhang/p/3264849.html

版权

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

转载于:https://www.cnblogs.com/martinzhang/p/3264849.html

weixin_30270561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动5-常用列表显示(案例)

<!doctype html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>浮动5-常用列表显示(案例)</title> <meta name="...
复制链接

扫一扫