ein Element vor der Nummer in einem OL in HTML einfügen

Ist es möglich, eine geordnete Liste zu erstellen (könnte verschachtelt sein), in der HTML-Elemente links von jeder Zahl sind? Hier ist ein einfaches Beispiel:ein Element vor der Nummer in einem OL in HTML einfügen

ich gespielt habe, um mit dem: vor in CSS, aber ich erkennen, dass Sie nicht da HTML-Inhalte einfügen können. Ist es möglich, dies organisch zu tun oder müsste ich auf einen "Hack" zurückgreifen, um dies zu erreichen?

Quelle

2017-07-25 Swarage

es, wenn Sie helfen könnten zeig uns, was du versucht hast und was nicht. – showdev

Ich habe versucht, die relative Positionierung zu verwenden und ein negatives "links" -Attribut zu geben, aber es überschneidet sich mit dem Abstand und ist nicht konsistent mit einer einstelligen Zahl gegenüber einer mehrstelligen Zahl. Beispiel hier: http://i.imgur.com/I2hBykO.png, und hier: http://i.imgur.com/aSqjQAo.png – Swarage

Sie haben es fast mit Positionierung, aber Sie müssen absolute statt relative verwenden.

Schauen Sie sich diese fiddle

Quelle

2017-07-25 17:54:37 sn3ll

DANKE, das ist genau das, wonach ich suche. – Swarage

This Fiddle können Sie ein Bild auf der linken Seite mit background in CSS einzufügen:

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

Optional jQuery (zu dynamisch ein Element vor dem einfügen e li):

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

Quelle

2017-07-25 17:44:16 trevorp

Gibt es eine Möglichkeit, dass ich dies anstelle eines tatsächlichen HTML-Elements angeben kann nur eine Hintergrund-URL? – Swarage

Sie können jQuery 'before()' verwenden, um das Element dynamisch einzufügen. ** [Fiddle] (http://jsfiddle.net/wmky4/16/) ** – trevorp

ich Flexbox Element verwenden würde, wie ich in der unten stehenden Code zeigen, von der dieser Seite genommen: 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>

Quelle

2017-07-25 18:03:22

ein Element vor der Nummer in einem OL in HTML einfügen

Antwort

Verwandte Themen