Ordnungsgemäße Markup/Style-Listen zum Ausgleich großer Artikelnummern

Question

Ich erstelle dynamisch eine Webseite mit einer geordneten Liste. Die Seite enthält 10 Elemente und verwendet das Attribut 'Start', um die Elemente entsprechend zu nummerieren. Eine generische geordnete Liste mit 'list-style-position: outside' funktioniert einwandfrei für Artikel mit einer Artikelnummer unter 1000.

Das Problem tritt auf, wenn Artikelnummern 4 oder mehr Ziffern lang sind, Teil der Artikelnummer wird teilweise durch die Containergrenze verdeckt. Das Anpassen des Listenauffüllens ist nicht wirklich eine Lösung, da es immer noch für Elementzählungen mit einer größeren Anzahl von Ziffern als für das Anpassen des Auffüllens unterbrochen wird, sowie dafür sorgen, dass einzelne Ziffern aufgrund übermäßigen Auffüllens schlecht aussehen.

Die Verwendung von 'list-style-position: inside' löst das Problem, dass die Positionsnummern verdeckt sind, führt jedoch zu einem neuen Problem, da der Inhalt des Elements unter den Listenartikelnummern verschoben wird die Zahlen.

kann ich immer verstecken nur die Artikelnummern und die Einführung einer neuen gefloatete div in jedem <li> und stellen Sie den Inhalt der Liste Artikelnummer, aber während die meine Präsentation Probleme löst, ist es semantisch weniger richtig, wie ich bin Markup und Inhalt rein aus Präsentationsgründen hinzufügen.

Gibt es eine CSS-Lösung für dieses Dilemma, von dem ich nichts weiß?

<style> 
     #container { 
      border: solid; 
     } 

     #container div, #container h1 { 
      border: solid 1px blue; 
     } 

     #outsideOl { 
      list-style-position: outside; 
     } 

     #insideOl { 
      list-style-position: inside; 
      padding-left: 0; 
     } 

    </style> 



    <div id="container"> 

    <ol id="outsideOl" start="3000"> 
     <li><h1>one</h1><div>the content inside the &lt;li&gt; is aligned to the right of the numbers, which is what I want, but long numbers are obscured by the container's border. The list elements are shifted to the right by the default padding for an &lt;ol&gt; element. If the list item number happens to be longer than the padding, part of the number is obscured.</div></li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     <li>seven</li> 
    </ol> 

    <hr/> 

    <ol id="insideOl" start="3007"> 
     <li><h1>one</h1><div>long numbers affect content flow and as such are left aligned to the container border (which is good because they are no longer obscured). The problmen now is the block content inside the li gets bumped down to the next line, and left aligns with the numbers. Curse you css!</div></li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     <li>seven</li> 
    </ol> 

    </div> 

Answer 1

Vielleicht könnten Sie eine Polsterung und/oder marigin anwenden und dann eine negative text-indent verwenden. Ich habe das nie selbst ausprobiert, aber es ist die einzige Art und Weise, wie ich mit reinem CSS umgehen kann, abgesehen von der Einführung zusätzlicher Präsentations-Markups.

Answer 2

Was ist das gewünschte Verhalten? Sie können die Sichtbarkeit des Überlaufs so einstellen, dass sehr große Zahlen in den Rand hineinragen. Wenn Sie möchten, dass sich die Breite der Zahlenspalte abhängig von der Anzahl der Listenelemente ändert, müssen Sie JS verwenden. Schade, aber es sollte nur eine Zeile sein (so etwas wie $('ul').each(function(el, index){el.css('padding-left',(Math.floor(Math.log(el.childNodes.length)/Math.LN10)+1)+'em');});)