“；联合收割机&x201D；使用CSS的列表项对

给定

城市
纽约
状态
纽约
拉链
10010

有没有办法将其渲染为

• 城市：纽约
• 州：纽约
• 邮政编码：10010

而不是正常的

• 城市
• 纽约
• 陈述
• 纽约
• 拉链
• 10010

只使用CSS？我无法更改源代码，也无法使用Javascript。

您可以尝试一下（仅在Firefox和Chrome桌面上测试）

.label{
显示：内联块；
}
.标签：：之前{
内容：“\2022”；
右侧填充：3px；
字体大小：120%；
}
.标签：：之后{
内容：“：”；
}
.价值{
显示：内联；
}
.value：：之后{
内容：“\A”；
空白：预处理；
}

城市
纽约
状态
纽约
拉链
10010

试试这个：

li{显示：内联；列表样式类型：无；}
li:n第n个子（2n+1）：在{content:'：'；左边距：5px；}
li:n第n个子项（2n+1）{content:“\2022”；显示：内联；右边距：5px；}
li:n第n个子（2n）：在{content:''；display:block；}之后

城市
纽约
状态
纽约
拉链
10010

似乎有效：浮动标签并将值更改为块

<ul>
  <li class="label">City</li>
  <li class="value">New York</li>
  <li class="label">State</li>
  <li class="value">NY</li>
  <li class="label">ZIP</li>
  <li class="value">10010</li>
 </ul>

---

当然-您做了哪些工作？多种显示组合：内联、块和列表项。使用：：after可以轻松获取冒号。我不知道如何组合这些项目。嗯。使用边距、填充和文本缩进模拟列表格式。和\a来模拟块。我想是的。我希望保留用于缩进、包装、设置列表样式项等的列表项机制。对于有序列表，我想我可以使用计数器。嗯。仍然希望少一些暴力，多一些列表。

.label {float:left}
.label::after {content: ": "; white-space: pre}
.value {display: block}