<!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>
有两点想问大家
1.为什么标箭头的地方会有两个空余的地方呢，我给ul设了block，并且没有设置高度
2.用什么方法能去掉这两块呢
谢邀。
ul{
margin: 0;
}
添加这个，这个间距是浏览器默认存在的，用padding:0;margin:0就可以去掉