使用下面的HTML,将列表显示为两列的最简单方法是什么?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

想要显示:

A B
C D
E

解决方案需要与Internet Explorer兼容。

我想有一个“内部”列表与列表子弹或十进制数字都与上级文本块齐平。列表条目的第二行必须具有与第一行相同的缩进!

例如:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. 

CSS只为它的“list-style-position”提供了两个值——内部和外部。在“inside”中,第二行与列表点齐平,而不是与上一行齐平:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

宽度“外面”我的列表不再与优越的文本块。

实验width text-indent, padding-left和margin-left适用于无序列表,但不适用于有序列表,因为这取决于列表小数的字符数:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

与“3.”和“4.”相比,“11.”和“12.”与上级文本块不一致。

那么关于有序列表和第二行缩进的秘密在哪里呢?谢谢你的努力!

我试图看到我的降价嵌套列表项呈现与相应的缩进时,在浏览器中查看实时从Bitbucket页面。但即使使用他们的例子(更新),我也搞不清楚它是如何工作的:

* Item 1
* Item 2
* Item 3
  * Item 3a
  * Item 3b
  * Item 3c

它忽略了3a-c项的缩进:

我想让它看起来像这样(语法在SE和Github上工作得很好):

他们的列表例子尤其令人难以接受:

1. Step 1
2. Step 2
3. Step 3
   * Item 3a
   * Item 3b
   * Item 3c

这是我专门为这个设置的回购。

想象一个简单的无序列表,其中包含一些<li>项。现在,我通过list style将子弹定义为方形:square;然而,如果我设置<li>项目的颜色:#F00;然后一切都变成了红色!

而我只想设置方块的颜色。有没有一种优雅的方法来定义CSS中项目符号的颜色…

...没有使用任何精灵图像或跨度标签!

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

CSS

li{
   list-style:square;
}

W3文档有一个前缀为DEPRECATED example:的嵌套列表示例,但他们从未用一个非DEPRECATED示例来纠正它,也没有确切地解释这个示例的错误所在。

那么,下面哪种方法是编写HTML列表的正确方法呢?

选项1:嵌套<ul>是父<ul>的子元素

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

选项2:嵌套的<ul>是它所属的<li>的子元素

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>