解决换行造成元素间空隙的问题

最新推荐文章于 2022-04-18 14:45:15 发布

ForMyWebFrontSide

最新推荐文章于 2022-04-18 14:45:15 发布

阅读量2.4k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/52062571

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<style>
    html, body {
        padding: 0px;
        margin: 0px;
    }

    .gd {
        width: 100px;
        height: 20px;
        text-align: center;
        display: inline-block;

        /*background: red;*/
        border-top: 1px solid red;
        border-bottom: 1px solid red;
        border-left: 1px solid red;
        margin:0 -2px;
        /*解决div换行造成的空隙问题*/
    }

    .gd:last-child {
        border-right: 1px solid red;
    }

    .gdWrap {
        border: 1px solid blue;
        width: 506px;
        height: 50px;
        /*overflow-x: auto;*/
    }

    .bWrap {
        width: 350px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid green;
    }

</style>
<body>
<div class="bWrap">
    <div class="gdWrap">
        <div class="gd">id</div>
        <div class="gd">name</div>
        <div class="gd">type</div>
        <div class="gd">phone</div>
        <div class="gd">addr</div>
    </div>
</div>
</body>

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决换行造成元素间空隙的问题

<style> html, body { padding: 0px; margin: 0px; } .gd { width: 100px; height: 20px; text-align: center; display: inline-block; /*backgr
复制链接

扫一扫