CSS实现无外边框列表效果

更新日期: 2019-03-06阅读: 3.6k标签: 列表

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

  1. 给每一个 li 设定右边框和下边框线
  2. 把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选择器

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

  3. 通过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

  1. 给每一个 li 设定右边框和下边框线
  2. 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框 
  3. 通过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>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
</table>

链接: https://fly63.com/article/detial/2370

html列表简单介绍

无序列表使用标签:<ul>,<li>属性:disc,circle,square;有序列表使用标签:<ol>,<li>属性:A,a,I,i,start;嵌套列表使用标签:<ul>,<ol>,<li> ;自定义列表使用标签:<dl>,<dt>,<dd>

css样式li不显示点点什么原因?怎么解决?

实际上用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候, list-style不起作用,不显示前面的点、圈等样式。

React列表中实现文案多行收起展开的功能

在我们平时的业务开发中经常会用到文案超出只有收起,点击在展示全部文案;通常的使用时使用css来实现

Vue.js 多选列表(Multi-Select)组件

多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计元素。有时候为了节省空间,我们会将选项折叠于 Combo Box 中

如何让10万条数据的小程序列表如丝般顺滑

某天闲着无聊想练一下手速,去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后,是列表居然出现了白屏。看了一下控制台:

了解虚拟列表背后原理,轻松实现虚拟列表

比如 umy-ui (ux-table)虚拟列表table组件, vue-virtual-scroller 以及 react-virtualized 这些优秀的插件快速满足业务需要。为了理解插件背后的原理机制,我们实现一个自己简易版的虚拟列表,希望在实际业务项目中能带来一些思考和帮助。

React 中的列表渲染为什么要加 key

常用写法是用 Arrary.prototype.map 方法,将数组形式的数据映射为 JSX.Element 数组,并嵌入到组件要返回的 JSX.Element 中,如下:

浅说虚拟列表的实现原理

在正文之前,先对虚拟列表做个简单的定义。根据上文,虚拟列表是按需显示思路的一种实现,即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!