css布局出现的小问题



 <!DOCTYPE html>
<html lang="zh-CN"> 
<head>
    <meta charset="utf-8">
    <title>单一按钮显示隐藏</title>
    <style type="text/css">
    #container{
        margin:10px auto;
        text-align:center;
        width:200px;
    }
    #top{
        background-color:#CED3D7;
        height:30px;
    }
    ul{
        list-style:none;
        padding:0px;
        display:block;
        border:1px solid blue;
    }
    li{
        border:1px solid red;
        padding-top:3px;
        padding-bottom:3px;
        cursor:pointer;
    }
    li:hover{
        background-color:white;
    }
    #show{
        border:1px solid #aaaaaa;
        width:100%;
        background-color:#E9EDF2;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            <h3>播放列表....</h3>
        </div>
        <div id="show">
        <ul>
            <li>山丘-李宗盛</li>
            <li>纪念-蔡健雅</li>
            <li>怎么唱情歌-刘惜君</li>
            <li>海阔天空-Beyond</li>
            <li>温柔-五月天</li>
        </ul>
        </div>
    </div>
</body>
<script type="text/javascript">

</script>
</html>

Screenshot.png

有两点想问大家
1.为什么标箭头的地方会有两个空余的地方呢,我给ul设了block,并且没有设置高度
2.用什么方法能去掉这两块呢

css 页面布局

绯色的兔子先生 10 years, 1 month ago

谢邀。


 ul{
    margin: 0;
}

添加这个,这个间距是浏览器默认存在的,用padding:0;margin:0就可以去掉

Bevis熊熊 answered 10 years, 1 month ago

Your Answer