css li三列

CSS Li 三列是网页设计中最常用的一种布局方式。通过对列表元素的样式设置，可以将一列列表分割为三列并实现内容的对齐。

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    box-sizing: border-box;
    width: 33.333%;
    padding: 10px;
  }

首先定义ul元素的样式，将list-style设置为none，去除默认的小圆点。接着设置margin和padding均为0，消除列表外边距和内边距的影响。然后通过display: flex和flex-wrap: wrap属性实现了在同一行容纳三个li元素，并且当屏幕缩小时自动换行。

然后定义li元素的样式，使用了box-sizing: border-box属性，防止边框和内边距增加元素盒子大小。将宽度设置为33.333%使得三列平分屏幕，padding为10px，使得内容与边框间隔适当。

如此便实现了一个基本的css li三列布局，可以根据不同需求修改样式。