css制作列表

2026-02-13 03:10:48CSS

无序列表

使用 ul 和 li 标签创建无序列表，默认样式为实心圆点。可以通过 CSS 修改列表项标记样式。

<ul class="custom-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

.custom-list {
  list-style-type: square; /* 修改为实心方块 */
  padding-left: 20px;
}

有序列表

使用 ol 和 li 标签创建有序列表，默认样式为数字序号。CSS 可控制序号类型。

css制作列表

<ol class="numbered-list">
  <li>第一步</li>
  <li>第二步</li>
</ol>

.numbered-list {
  list-style-type: upper-roman; /* 大写罗马数字 */
}

自定义列表标记

通过 list-style-image 使用图片作为标记，或完全用 :before 伪元素自定义。

css制作列表

.custom-list {
  list-style-image: url('marker.png');
}

/* 高级自定义 */
.custom-list li {
  position: relative;
  padding-left: 30px;
}
.custom-list li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff5722;
}

横向列表

通过 display: flex 或 inline-block 实现水平排列。

.horizontal-list {
  display: flex;
  gap: 15px; /* 项间距 */
  list-style: none; /* 移除默认标记 */
  padding: 0;
}

响应式列表

使用媒体查询调整不同屏幕尺寸下的列表布局。

.responsive-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (max-width: 600px) {
  .responsive-list {
    grid-template-columns: 1fr;
  }
}