如何用div/table实现标题与描述间带|分隔符的条目分类？

嘿 Carla，作为刚入门Web设计的新手，想要搞定标题和描述之间的竖线分隔其实超简单！我给你分享几种实用又易上手的方案，不用纠结复杂的结构，选适合你的就行～

最推荐：Flexbox + 伪元素（语义化+简洁） #

这是现在主流的实现方式，不用额外加多余标签，语义化也做得很好，适配性拉满。

HTML结构 #

<div class="category-item">
  <h3 class="item-title">设计资源</h3>
  <p class="item-desc">包含UI组件、图标库和配色方案</p>
</div>

CSS样式 #

.category-item {
  display: flex;
  align-items: center; /* 让标题、分隔符、描述垂直居中对齐 */
  gap: 10px; /* 控制各元素间的间距，可按需调整 */
}

/* 用伪元素自动生成竖线分隔符，不用额外写标签 */
.item-title::after {
  content: "|";
  color: #666; /* 分隔符颜色，和你的页面风格匹配就行 */
  font-size: 16px; /* 调整分隔符大小 */
  font-weight: normal; /* 避免继承标题的加粗样式 */
}

这种方法的好处是结构干净，只用必要的标签，Flex布局能轻松应对不同屏幕尺寸，后续调整样式也超方便。

新手友好：Inline-block + 独立分隔符标签 #

如果你觉得伪元素有点抽象，也可以直接加一个专门的分隔符元素，直观易懂，适合快速上手。

HTML结构 #

<div class="category-item">
  <h3 class="item-title">设计资源</h3>
  <span class="separator">|</span>
  <p class="item-desc">包含UI组件、图标库和配色方案</p>
</div>

CSS样式 #

.item-title, .separator, .item-desc {
  display: inline-block;
  vertical-align: middle; /* 确保所有元素垂直居中 */
}

.separator {
  margin: 0 10px; /* 控制分隔符和前后内容的间距 */
  color: #666;
  font-size: 16px;
}

不推荐：Table布局 #

虽然用table也能实现这个效果，但table是专门用来展示表格数据的，用在这里语义化不符合规范，而且样式调整起来很麻烦，现在几乎没人这么做了，所以不建议你用这种方式。

额外小技巧 #

• 可以给分隔符加一点点样式，比如opacity: 0.7让它更柔和，或者换成细一点的竖线（比如用border代替文字竖线：border-left: 1px solid #666; height: 16px;，这种方式能更精准控制线条粗细）
• 如果需要响应式，在小屏幕上可以用媒体查询把Flex布局改成垂直排列，同时隐藏分隔符，让排版更友好

内容的提问来源于stack exchange，提问作者Carla