HTML/CSS：如何对每个列表项的多个列进行对齐

我希望每个列表项都有多个对齐的列（固定的列数），例如

    - John      41    Singer
    - Ringo     45    Drummer

这可以通过html/css实现吗？也许是CSS中的“li”类？它需要是列表项。

只需使用一个表

 <table>
  <th>
    <td>Name</td>
    <td>Age</td>
    <td>whateverelse</td>
  </th>
  <tr>
    <td>John</td>
    <td>45</td>
    <td>i gues</td>
  </tr>
 </table>

如果您真的需要它，您也可以将表包装在列表中，如

…
，这样您就可以像使用css一样对其进行样式化…
只需使用表

 <table>
  <th>
    <td>Name</td>
    <td>Age</td>
    <td>whateverelse</td>
  </th>
  <tr>
    <td>John</td>
    <td>45</td>
    <td>i gues</td>
  </tr>
 </table>

如果您真的需要它，您也可以将表包装在列表中，就像
…
，这样您就可以使用css对其进行任何样式化…
已经说明了，但理想情况下，这是一个数据表，用于此的正确html应该在表中。如果您反对在html中使用表，那么下面的解决方案应该可以。更新容器宽度以获得更宽的布局

钢笔：

HTML:

<div class="wrapper">
  <div class="row">
    <div>John</div>
    <div>41</div>
    <div>Singer</div>
  </div>
  <div class="row">
    <div>Ringo</div>
    <div>45</div>
    <div>Drummer</div>
  </div>
</div>

<ul class="wrapper list">
  <li class="row">
    <div>John</div>
    <div>41</div>
    <div>Singer</div>
  </li>
  <li class="row">
    <div>Ringo</div>
    <div>45</div>
    <div>Drummer</div>
  </li>
</ul>

已经说过了，但理想情况下这是一个数据表，正确的html应该在一个表中。如果您反对在html中使用表，那么下面的解决方案应该可以。更新容器宽度以获得更宽的布局

钢笔：

HTML:

<div class="wrapper">
  <div class="row">
    <div>John</div>
    <div>41</div>
    <div>Singer</div>
  </div>
  <div class="row">
    <div>Ringo</div>
    <div>45</div>
    <div>Drummer</div>
  </div>
</div>

<ul class="wrapper list">
  <li class="row">
    <div>John</div>
    <div>41</div>
    <div>Singer</div>
  </li>
  <li class="row">
    <div>Ringo</div>
    <div>45</div>
    <div>Drummer</div>
  </li>
</ul>

列表版本格式化为table，并经过黑客攻击使其看起来也像列表（HermesTrismegistus的修改版本；）


ul.table-style{
显示：表格；
边框：1px纯黑；
}
桌式李：以前{
显示：列表项；
内容：“；
}
桌式李{
显示：表格行；
}
桌式跨度{
显示：表格单元格；
边框：1px纯黑；
宽度：100px；
}


名称
年龄
还有什么


约翰
45
伊格

列表版本格式化为表格，并经过黑客攻击使其看起来也像列表（Herestrismegistus；的修改版）


ul.table-style{
显示：表格；
边框：1px纯黑；
}
桌式李：以前{
显示：列表项；
内容：“；
}
桌式李{
显示：表格行；
}
桌式跨度{
显示：表格单元格；
边框：1px纯黑；
宽度：100px；
}


名称
年龄
还有什么


约翰
45
伊格

您可能只需要使用html表格……那么，您想要一个包含3列项目的列表吗？请向我们展示一些html示例。如果将每个列表项的这三个值分别包装到一个额外的元素中（span或其他），那么您应该能够使用相应的
表-…
属性来实现这一点，对于
显示
@Patrik-Alexits，是的。您可能只需要使用html表…那么，您想要列表吗，对于有3列的项目，请向我们展示一些HTML示例。如果将每个列表项的这三个值分别包装到一个额外的元素中（span或其他），那么您应该能够使用相应的
表-…
属性来实现这一点，该属性用于
显示
@Patrik-Alexits，是的。谢谢。它需要是列表项，因为我想使用li类的某些属性/样式。@yorgo这是一个相当糟糕的参数；使用哪些HTML元素来标记内容不应该取决于您以后想要如何设置它的样式xD@yorgo他没有错，这种数据应该用在表格中。但是请查看我的解决方案，将其显示在列表或一组div中。感谢Hermes和@Josh的帮助和时间，我对这两种解决方案都投了赞成票。/br谢谢。它需要是列表项，因为我想使用li类的某些属性/样式。@yorgo这是一个相当糟糕的参数；使用哪些HTML元素来标记内容不应该取决于您以后想要如何设置它的样式xD@yorgo他没有错，这种数据应该用在表格中。但是请查看我的解决方案，将其显示在列表或一组div中。感谢Hermes和@Josh的帮助和时间，我对这两种解决方案都投了赞成票。/BR