自适应宽度的菜单

最新推荐文章于 2024-08-17 21:31:15 发布

awn80645

最新推荐文章于 2024-08-17 21:31:15 发布

阅读量118

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/alexandra/p/3526575.html

版权

不设置宽度，直接设置padding。

<!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=utf-8" />
<title>自适应宽度菜单</title>
<style type="text/css">
    .header{
        width: 880px;
        margin:0 auto;
        position: relative;
    }
    .nav{
        position: absolute;
        top:130px;
        left: 0px;
    }
    .nav li{
        float: left;
        list-style-type: none;
    }
    .nav a{    
        font-size: 14px;
        line-height: 1.5em;
        color: #555;
        padding:0 10px;
        text-decoration: none; 

}
</style>
</head>

<body>
    <div class="header">
        <div class="nav">
            <li>
                <a href="#">博客园</a>
            </li>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">博问</a>
            </li>
            <li>
                <a href="#">闪存</a>
            </li>
            <li>
                <a href="#">新随笔</a>
            </li>
            <li>
                <a href="#">联系</a>
            </li>
            <li>
                <a href="#">订阅</a>
            </li>
            <li>
                <a href="#">管理</a>
            </li>
        </div>
    </div>    
</body>
</html>

转载于:https://www.cnblogs.com/alexandra/p/3526575.html

awn80645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自适应宽度的菜单

不设置宽度，直接设置padding。<!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...
复制链接

扫一扫