[分享]css列表布局计算公式

CSS列表布局常用的计算公式如下：

/* 水平排列列表项 */
ul {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
}

/* 垂直排列列表项 */
ul li {
  display: block;
  margin-bottom: 20px; /* 列表项间隔 */
}

/* 单行水平列表 */
ul.horizontal {
  white-space: nowrap; /* 不换行 */
  overflow-x: auto; /* 自动滚动 */
}

/* 根据数量自适应宽度 */
ul.adaptive {
  display: flex;
  justify-content: space-between;
}

ul.adaptive li {
  width: calc(100% / 数量 - 间隔宽度);
  margin-right: 间隔宽度;
}

/* 带箭头的垂直列表 */
ul.vertical.arrow {
  position: relative;
}

ul.vertical.arrow:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-left: 10px solid #ccc; /* 箭头颜色 */
}

/* 悬浮样式 */
ul.hover li:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

/* 选中样式 */
ul.active li.active {
  background-color: #ccc;
}

/* 点击选中 */
ul.clickable li {
  cursor: pointer;
}

ul.clickable li.active {
  background-color: #ccc;
} 

以上是常用的CSS列表布局计算公式，希望对大家有所帮助。