首页 新闻 搜索 专区 学院

如何去掉两个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>
空明流光的主页 空明流光 | 初学一级 | 园豆:42
提问于:2013-08-02 10:10
< >
分享
最佳答案
0
ul{
    margin:0;
}

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

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

高手

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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