html 利用margin负值隐藏列表顶部边框

最新推荐文章于 2022-08-04 15:21:51 发布

原创最新推荐文章于 2022-08-04 15:21:51 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用CSS的margin负值隐藏HTML列表的顶部边框，通过嵌套标签并设置超出隐藏，实现样式统一且无额外样式设置，具有良好兼容性和扩展性。注意避免父级padding对显示的影响，可考虑调整结构或padding值。

html 利用margin负值隐藏列表顶部边框

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .arc-list{
            overflow: hidden;
            width: 676px;
        }
        .arc-list dl{
            height: 200px;
            margin-top: -1px;
            border-top: 1px dotted #ccc;

        }


  /*
  当父级元素存在内边距时 不能隐藏顶部边框
解决方法：多嵌套层标签
  在父级元素与子级元素之间嵌套一层元素，这层元素从父级元素内容开始，这样就不会存在内边距，设置超出隐藏即可*/
        .arc-list1{
            overflow: hidden;
            width: 676px;
            padding: 14px 50px;
        }
        .arc-con{
            overflow: hidden;   /*嵌套的元素*/
        }
        .arc-list1 dl{
            height: 200px;
            margin-top: -1px;
            border-top: 1px dotted #ccc;
        }

        }
    </style>
</head>
<body>
一
<br>
<div class="arc-list">
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
</div>
<!-- 利用margin负值往上移动 第一个dl超出父级元素 overflow隐藏上边框-->
二
  <!--当父级元素有内边距时 使用margin负值第一个dl会显示-->
<br>
<div class="arc-list1">
    <div class="arc-con">   <!--从这里开始-->
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
     <dl class="cleartfix">
        wwwwwwwwwwwwwwwwww
     </dl>
</div>
</body>
</html>