Entferne den linken Abstand einer geordneten Liste (OL)

Sie sollten in der Lage sein, em für eine skalierbare Größe zu verwenden (anstatt eine feste Größe für px zu verwenden). Dies würde eine Skalierung der Schriftgröße ermöglichen, aber die skalierte Größe anpassen, wenn Padding angewendet wird.

Hier ist ein jsfiddle zur Veranschaulichung. Ändere die Schriftgröße body in verschiedene skalierte Größen (probiere 1em, 2em, etc.) und du wirst sehen, dass der Absatz dem ol auf der linken Seite entspricht.

Sie können feststellen, dass Browser in verschiedenen Größen rendern. 1.8e, funktioniert mit Chrome, aber es kann 1.6em oder 1.9em für Firefox oder IE erfordern. Die Sache mit dem Web ist, dass es flüssig und skalierbar ist, so dass das Fotografieren für Pixelgenauigkeit, besonders beim Arbeiten mit benutzer-skalierbaren Schriften, fast immer eine Null-Gewinn-Situation ist.

Der Standardabstand auf der linken Seite kann durch linkes Padding oder den linken Rand von ol oder li oder eine Kombination daraus (abhängig vom Browser) verursacht werden. Um also einen bestimmten Abstand zu erhalten, setzen Sie alle diese Eigenschaften auf null, mit Ausnahme einer von ihnen, die Sie auf den von Ihnen bevorzugten Wert setzen. Beachten Sie, dass dieser Abstand groß genug für die Listenmarkierungen (Zahlen) sein muss, ansonsten werden sie nicht angezeigt oder abgeschnitten. Der Wert von 1.3em (d. H. Das 1,3-fache der Schriftgröße) sollte für sie geeignet groß sein und wenig oder keinen zusätzlichen Platz auf der linken Seite lassen.

Ja, standardmäßig wäre es 40px. Verwenden Sie CSS:

  

Auf meiner Website werden die font-family und font-size von Benutzern dynamisch geändert. Daher kann ich padding-left nicht voreinstellen.

Warum hält dich das davon ab, padding-left zu benutzen? Es ist absolut das richtige Werkzeug, wenn Sie das Standard-Stylesheet des Browsers überschreiben möchten.

Wenn Sie sicherstellen möchten, dass Ihre Liste bündig mit der linken Begrenzung des übergeordneten Containers ist, verwenden Sie Ihr eigenes Listen-Aufzählungsbild.

Sie können die folgenden CSS verwenden, um Ihre ULs anzupassen:

Hoffe, das hilft! :)