html - 包含列的 ul 列表，不使用 DIV 或表格

Question

所以，我想知道是否可以创建一个列表，每个列表项有两列，就像您可以在 word 文档中轻松模拟一样:

我知道我可能会创建一个表或两个包装 DIVS，但我想知道是否有不同的解决方案可以仅使用 CSS 实现相同的目的。

Answer 1

可以强制<li>的第一部分有一个特定的

<ul>
   <li><b style="width : 100px; display:inline-block;">Text one</b> Next Column
   <li><b style="width : 100px; display:inline-block;">Text 2</b> Bla Bla
   <li><b style="width : 100px; display:inline-block;">The Indent</b> Is Set
   <li><b style="width : 100px; display:inline-block;">But I'm not</b> Using DIVs
</ul>

或者更简单的说

<style type="text/css">
ul.xoxo b {
    width   : 100px;
    display : inline-block;
    }
</style>



<ul class="xoxo">
   <li><b>Text one</b> Next Column
   <li><b>Text 2</b> Bla Bla
   <li><b>The Indent</b> Is Set
   <li><b>But I'm not</b> Using DIVs
</ul>