2017-07-25 54 views
0

是否可以創建一個有序列表(可以是嵌套的),每個數字左邊有html元素?下面是一個粗略的例子:在html中ol之前插入一個元素

enter image description here

我與周圍的發揮:之前在CSS中,但我意識到,你不能插入HTML內容在那裏。是否有可能做到這一點,或者我會不得不採取一些「黑客」,以實現這一點。

+1

它可以幫助你向我們展示您嘗試過的方法以及無法解決的問題。 – showdev

+0

我試過使用相對定位,並給出一個負的「左」屬性,但它與間距混淆,並不符合單個數字號碼與多位數字。這裏的示例:http://i.imgur.com/I2hBykO.png,和這裏:http://i.imgur.com/aSqjQAo.png – Swarage

回答

1

你幾乎與定位了吧,但你需要使用absolute,而不是relative

看看這個fiddle

+0

謝謝你,這正是我要找的。 – Swarage

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(以在th之前動態插入元素Ëli):

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

有沒有一種方法,我可以指定這是一個實際的html元素,而不是隻是一個後臺網址? – Swarage

+0

你可以使用jQuery'before()'動態插入元素。 ** [小提琴](http://jsfiddle.net/wmky4/16/)** – trevorp

0

如我在下面的代碼,從這個網站採取我會用Flexbox的元素: Link to lists by Doron B.

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;}
<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>

相關問題