在html

Question

是否可以创建一个有序列表（可以嵌套），其中每个数字左侧都有html元素？这是一个粗略的例子：

我曾在css中玩过：但我意识到你无法在那里插入html内容。是否可以有机地执行此操作，或者我是否必须诉诸某些＆＃34; hack＆＃34;为了达到这个目的。

Answer 1

This Fiddle允许您使用CSS中的background向左侧插入图片：

<强> HTML：

<ol class="img">
<li>(group) As only</li>
<ol class="img">
  <li>AB</li>
  <li>AC</li>
</ol>
<li>(group) Bs only</li>
  <ol class="img">
    <li>BA</li>
    <li>BC</li>
  </ol>
<li>(group) Cs only</li>
<ol class="img">
  <li>CA</li>
  <li>CB</li>
</ol>
</ol> 
<div id="foo">*</div>

<强> CSS：

ol.img li{background: 
  url("http://www.rabensburg.at/modules/event/images/rightarrow.gif") no-repeat scroll 0px 0px transparent;
  list-style-position: inside;
  padding-left: 16px;
}

可选jQuery（在li之前动态插入元素）：

$( "li" ).before( $('#foo') );

Answer 2

你几乎有定位，但你需要使用absolute代替relative。

查看此fiddle

Answer 3

我会使用Flexbox元素，因为我在下面的代码中显示，取自本网站： Link to lists by Doron B.

＆＃13;

＆＃13;

ol, ul { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; margin: 1em 0px; padding: 0; list-style: none; }
li { display: flex; line-height: 1.5; position: relative; }
ol { counter-reset: numbers }
ol > li { }
ol > li:before { counter-increment: numbers; content: "" counter(numbers) ""; color: inherit; font-weight: normal; display: flex; flex: none; align-items: flex-start; justify-content: flex-end; padding-right: 0.8em; }
ol[data-subsections] { }
ol[data-subsections] li { }
ol[data-subsections] li:before { content: counters(numbers,".") " " }
ol[data-subsections] > li {font-weight: bold;}
ol[data-subsections] > li:before {font-weight: bold; }
ol[data-subsections] ol {width: 100%; flex: none; padding: 1em 0; font-weight: normal;}

＆＃13;

<section>
         <h5>Ordered list, subsections<code> ol data-subsections </code></h5>
         <ol data-subsections>
            <li>A</li>
            <li><a href="http://www.zzzzzzz.com">B </a>
              <ol>
                <li>Subsection</li>
                <li>Subsection
                  <ol>
                <li>Subsection</li>
                <li>Subsection</li>
                <li>Subsection</li>
              </ol>
                </li>
                <li>Subsection</li>
              </ol>
           </li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
         </ol>
      </section>

＆＃13;

＆＃13;

＆＃13;