开发者社区> 问答> 正文

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

展开
收起
杨冬芳 2016-06-02 13:40:14 1887 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista
    ul{
        margin: 0;
    }

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

    2019-07-17 19:24:43
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载