开发者社区> 问答> 正文

含有中文的<li>宽度不能自适应

screenshot
html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
    * {margin: 0; padding: 0; list-style: none; text-decoration: none;}
    #header {background: #fff; width: 100%;  height: 79px;  border-bottom: 1px inset #E1E1E1; position: fixed; top: 0; left: 0; z-index: 99;}
    #menu {width: 90%;  height: 79px;  margin: 0 auto;}
    #menu-li {float: left;}
    .nav {height: 79px;}
    .nav li {margin-right: 5px;  height: 78px;  float: left;}
    .nav li a {padding: 0 20px;  height: 78px;  color: #888888; font: normal 300 16px/78px Arial,sans-serif; display: block; text-align: center;}
    .nav li a:hover {color: #fff; background: #FF9900; cursor: pointer;}

    .submenu {border-top: 1px solid #E1E1E1;}
    .submenu li {height: 48px; float: none; border-left: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1;}
    .submenu li a {height: 48px; font: normal 300 16px/48px Arial,sans-serif; display: block; padding: 0 20px; color: #888888; background: #fff;}
    .submenu li a:hover {color: #fff; background: #FF9900; cursor: pointer;}
    .hide {display: none;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>


<script type="text/javascript">
    $(function() {
        var navLi = $('.navLi');
        navLi.hover(
            function() {
                var position = $(this).position();
                var liWidth = $(this).width();
                var liHeight = $(this).height();
                $(this).children('ul').css({
                    /*'position': 'relative',
                    'left': liWidth,
                    'top': -liHeight + 10*/

                    // 使用absolute会导致中文宽度不能自适应
                    'position': 'absolute',
                    'left': position.left + liWidth,
                    'top': position.top + 10
                });
                $(this).children('ul').show();
            },function() {
                $(this).children('ul').hide();
            }
        );
    })
</script>


</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id="menu">
                <div id="menu-li">

                <!-- 导航部分 -->
                    <ul class="nav">
                        <li><a href="./">首页</a></li>
                        <li class="navLi"><a href="category.php?cid=1">HTML</a>
                            <ul class="submenu hide">
                                <li class="navLi"><a href="category.php?cid=7">XS</a></li>
                            </ul>
                        </li>
                        <li class="navLi"><a href="category.php?cid=2">CSS</a></li>
                        <li class="navLi"><a href="category.php?cid=3">JavaScript</a>
                            <ul class="submenu hide">
                                <li class="navLi"><a href="category.php?cid=5">Jquery</a>
                                <ul class="submenu hide">
                                    <li class="navLi"><a href="category.php?cid=8">哈哈杂地工中</a></li>
                                    <li class="navLi"><a href="category.php?cid=9">ajax</a></li>
                                </ul>
                                </li>
                                <li class="navLi"><a href="category.php?cid=6">JS高级</a></li>
                            </ul>
                        </li>
                        <li class="navLi"><a href="category.php?cid=4">PHP</a></li>
                    </ul>
                </div>

            </div>
        </div>
</body>
</html>

展开
收起
a123456678 2016-03-25 16:26:57 2152 0
0 条回答
写回答
取消 提交回答
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载