首页 新闻 会员 周边 捐助

如何去掉两个div的间距呢？

0
悬赏园豆：10 [已解决问题] 解决于 2013-08-02 11:08

如何去掉.top和.menu之间的间距呢？去掉后让.menu紧贴.top的底部

<!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><title>
    
</title>
<style>
    body {
    background: #fff;
    color: #333;
    font: 12px '宋体', Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
}

#header 
{
    height:245px;
    border:1px solid gray;
    background:url(../images/top.gif) repeat-x left -29px;
}

.wrapper {
    width:960px;
    margin: 0 auto;
    padding:0;
}

.top
{
    height:100px;
    margin:0;
    padding:0;
    }

.menu {
    line-height:100%;
}

#footer {
    height:115px;
    border-top:2px solid #1d87be;
    background:#f7f7f7;
    margin-top:10px;
}

</style>
</head>
<body>
    <form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkkgIRpHg79VyEF0fRmU0YJwEZT6omxeV9o40AFywIGk8=" />
</div>

    <div>
        <div id="header">
            <div class="wrapper">
                <div class="top">
                </div>
                <div class="menu">
                    <div id="menubox" class="main_menu">
                        <ul>
                            <li class="current"><a href="http://localhost/Default.aspx" target="_self"><span><em>
                                网站首页</em></span></a></li>
                            <li><a href="http://localhost/Category_1/Index.aspx" target="_self"><span><em>文章中心</em></span></a></li>
                            <li><a href="http://localhost/Category_2/Index.aspx" target="_self"><span><em>图片中心</em></span></a></li>
                            <li><a href="http://localhost/Category_3/Index.aspx" target="_self"><span><em>下载中心</em></span></a></li>
                            <li><a href="http://localhost/Category_7/Index.aspx" target="_self"><span><em>雁过留声</em></span></a></li></ul>
                    </div>
                </div>
            </div>
        </div>
        

        
    </div>
    </form>
</body>
</html>
空明流光的主页 空明流光 | 初学一级 | 园豆：111
提问于：2013-08-02 10:10
< >
分享
最佳答案
0 
ul{
    margin:0;
}

因为ul有默认样式，把你的.menu撑大了~

收获园豆：5
libaoheng | 小虾三级 |园豆：1433 | 2013-08-02 10:50

高手

空明流光 | 园豆：111 (初学一级) | 2013-08-02 11:07
其他回答(3)
0

可以设置 .menu{margin-top:-2px;}

收获园豆：1
Yu | 园豆：12990 (专家六级) | 2013-08-02 10:25

为什么呀？这样设了之后我想会有新的问题出现的，况且也不是-2，应该是-13px，但为什么会产生这13像素的误差呢？

支持(1) 反对(0) 空明流光 | 园豆：111 (初学一级) | 2013-08-02 10:32

@沧海一杰: 数值多少，我是举例，具体多少看实际情况

正常是不会的，或者可能有其它CSS影响

支持(0) 反对(0) Yu | 园豆：12990 (专家六级) | 2013-08-02 10:36

@Yu: 这种实不可取，我写这个页面需要兼容八种浏览器，以及IE6到IE10,不能乱写，后面页面做大了，出问题了会死人的

支持(0) 反对(0) 空明流光 | 园豆：111 (初学一级) | 2013-08-02 11:07
0

现在.menu就是紧贴.top的底部。

“网站首页”文字没有紧贴.top的底部是由于ul的margin-top，将之设置为0即可。

ul{
    margin:0px;
}
收获园豆：2
dudu | 园豆：30925 (高人七级) | 2013-08-02 10:54
0

对于界面上有的元素，都先reset 。

body,div,ul{margin:0px;padding:0px;}

收获园豆：2
幻天芒 | 园豆：37205 (高人七级) | 2013-08-02 11:02
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。