CSS实现无外边框列表效果

kbyyd24 发布于2019-04-23 11:46 / 905人阅读

摘要：方法一使用外层容器切割方法一使用外层容器切割给每一个设定右边框和下边框线把放置在一个外层中，设定的宽高，通过将一部分的边框隐藏此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。

方法一：使用外层容器切割

给每一个 li 设定右边框和下边框线
把ul放置在一个外层div中，设定div的宽高，通过overflow:hidden将一部分li的边框隐藏

此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。

CSS部分：

body{background: #f3f3f3;}
ul, li{list-style: none; padding: 0; margin: 0;}
div{
    width: 323px;
    height: 302px;
    overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/
}
div ul{
    /*一个li元素宽度为81px,width大小只要大于（81 x 4）324px,一排就能显示四个li元素*/
    width: 325px;
}
div ul li{
    /*设置右边框和下边框*/
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    height: 100px;
    width: 80px;
    float: left;
    background: #fff;
}

HTML部分：

<div>
        <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

方法二：使用CSS选择器

给每一个 li 设定右边框和下边框线
通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

此方法仅适用于每行固定显示两个li的情况，不需要计算宽高，也不需要设置父容器。

CSS部分：

body{background: #f3f3f3;}
ul, li{list-style: none; padding: 0; margin: 0;}
ul{width: 210px;}
/* 设置右边框和下边框 */
li{width: 100px; height: 80px; float: left; background: #fff; border-width: 0 1px 1px 0; border-color: #ff3333; border-style: solid; }
/* 去除偶数li的右边框 */
li:nth-child(even){border-right: 0;}
/* 去除倒数第2个li的下边框 */
li:nth-last-child(2){border-bottom: 0;}
/* 去除最后一个li的下边框 */
li:last-child{border-bottom: 0;}

HTML部分：

<div>
        <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

方法三：使用table

给每一个 li 设定右边框和下边框线
通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

CSS部分：

body{background: #f3f3f3;}
table{width:300px; height: 200px; border-collapse:collapse; }
td{ border:1px solid black; background-color: #fff; text-align: center; }
/* 去除第一行所有td的上边框 */
tr:first-child td,tr:first-child th{ border-top:0px;}
/* 去除最后一行所有td的上边框 */
tr:last-child td{border-bottom:0px;}
/* 去除每一行里第一个td的左边框 */
td:first-child{ border-left:0;}
/* 去除每一行里最后一个td的右边框 */
td:last-child { border-right:0;}

HTML部分：

<table>
    <tr>
        <td>11td>
        <td>12td>
        <td>13td>
    tr>
    <tr>
        <td>21td>
        <td>22td>
        <td>23td>
    tr>
table>

GPU云服务器云服务器点击边框效果js css效果列表文章js收缩效果效果显示 css jquery

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1141.html

css如何实现n宫格布局?

摘要：常见应用场景现在的界面基本都是大同小异宫格布局现在基本成了每个必然的存在带边框常用在功能导航页面无边框常用在首页分类设计目标在环境下通过实现宫格并且可以支持有无边框和每个格是否正方形有边框且每个格为正方形无边框最终效果百分比小技巧先解释一个常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在功能导航页面 showImg(htt...

sarva 2019-08-30 15:44 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

Jingbin_ 2019-08-29 16:15 评论0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。多列布局基本概念 1、多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。 2、跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: 3; /*分割线*/ -webkit...

mayaohua 2019-08-02 11:08 评论0 收藏0
CSS学习笔记(九) 界面组件之导航菜单

摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

pingink 2019-08-28 18:03 评论0 收藏0
从项目中学习HTML+CSS

摘要：最近由于工作原因以及自己的懈怠，已经很久都没有更新过博客了。所以这次就根据具体的一个网页项目来梳理一下我这段时间学习这些东西的成果。最近由于工作原因以及自己的懈怠，已经很久都没有更新过博客了。通过这段时间，我发现坚持一件事情是真的很难，都说万事开头难，但是在放弃这件事上好像开头了后面就顺理成章的继续下去了。中间即使不怎么情愿也在努力的每周更新博客，但是自从9月份以来，第一次因为工作需要加班而...

Lin_R 2019-04-23 13:12 评论0 收藏0