想象一下包含一些<li>项目的简单未排序列表.现在,我已经将子弹定义为方形通过list-style:square;但是,如果我设置了<li>项目的颜色,color: #F00;那么一切都变成了红色!

虽然我只想设置方形子弹的颜色.是否有一种优雅的方式来定义CSS中子弹的颜色......

...不使用任何精灵图像也不使用span标签!

HTML

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

CSS

li{
   list-style:square;
}

W3文档有一个前缀为的嵌套列表示例DEPRECATED EXAMPLE:,但它们从未使用非弃用示例对其进行更正,也未解释该示例的确切错误.

那么这些方法中哪一种是编写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>

我希望有一个"内部"列表,列表项目符号或十进制数字都与高级文本块齐平.第二行列表条目必须与第一行具有相同的缩进!

例如:

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"提供了两个值 - 内部和外部.使用"内部"第二行与列表点齐平,而不是使用上级行:

3. longer Text, longer Text, longer Text, …

有没有办法用破折号(即 - 或 - –或 - —)创建HTML格式的列表样式

<ul>
  <li>abc</li>
</ul>

输出:

- abc

li:before { content: "-" };虽然我不知道该选项的缺点(并且非常有必要提供反馈),但是我想到了这样的事情.

更一般地说,我不介意知道如何使用通用字符列表项.

使用以下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上运行.

有没有办法调整列表样式图像的位置？

当我对列表项使用填充时,图像将保持在其位置,并且不会随填充移动...

我想控制一个子弹<li>在一个<ol>或多个中向右推动多少水平空间<ul>.

也就是说,而不是总是拥有

*  Some list text goes
   here.

我希望能够改变它

*         Some list text goes
          here.

要么

*Some list text goes
 here.

我环顾四周,但只能找到左右移动整个区块的说明,例如,http://www.alistapart.com/articles/taminglists/

我知道LI里面的DIV是不被允许的,但我最近在很多"大"网站上都看过它:Smashing Magazine,Web Designer Wall ......等我尝试验证网站,他们有错误,但没有关于李的div？!

所以我可以在LI里面使用它,我需要它才有效吗？

我有以下列表:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

我想摆脱子弹,所以我试过:

 ul#otis {
 list-style-type: none;
 }

但这没用.从显示的列表中删除项目符号的正确方法是什么？

我想知道是否可以利用font-awesome(或任何其他标志性字体)类来创建自定义<li>列表样式类型？

我目前正在使用jQuery来做到这一点,即:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

但是,当<li>文本在页面上换行时,这不正确,因为它认为图标是文本的一部分,而不是实际的子弹指示器.

有小费吗？