Domyślnie uporządkowana lista wygląda tak:Usuń lewy odstęp uporządkowanej listy (OL)
Istnieją pewne odstęp z lewej strony listy. Czy istnieje sposób na usunięcie tych odstępów?
Oto, czego chcę:
Na mojej stronie, czcionka mieszkaniami i font-size zostaną zmienione przez użytkowników dynamicznie. Dlatego nie jestem w stanie zaprogramować wypełnienia - po lewej stronie.
Powinieneś być w stanie używać em dla skalowalnego rozmiaru (zamiast ustalonego rozmiaru px). Umożliwiłoby to skalowanie rozmiaru czcionki, ale dopasowało rozmiar przeskalowany przy stosowaniu wypełnienia.
ol { padding-left: 1.8em; }
Oto jsfiddle do zilustrowania. Zmień rozmiar czcionki body na różne skalowane rozmiary (spróbuj 1em, 2em itd.), A zobaczysz akapit odpowiadający ol po lewej stronie.
Może się okazać, że przeglądarki renderują się w różnych rozmiarach. 1.8e, działa z Chrome, ale może wymagać 1.6em lub 1.9em dla Firefoksa lub IE. Rzecz w sieci jest płynna i skalowalna, więc fotografowanie z precyzją pikseli, szczególnie podczas pracy z czcionkami skalowalnymi przez użytkownika, prawie zawsze kończy się niepowodzeniem.
Dzięki za szczegółową odpowiedź! – Alan
Tak, domyślnie będzie to 40 pikseli. Zastosowanie CSS:
ul {padding-left: 1.5em; list-style: decimal;}
Dzięki za odpowiedź Praveen!10px jest dobre, jeśli rozmiar czcionki jest mały. Jeśli jednak rozmiar czcionki jest duży, zniknie z linii prostej. Czy istnieje metoda rozwiązania tego problemu? Dzięki! – Alan
Proste! Podaj 'padding-left' w' em', a nie w 'px'. Jest to procent rozmiaru czcionki. Na razie, jeśli podasz '1.5em', zachowa on wartość ** dla wszystkich rozmiarów **, nawet jeśli ** wzrośnie ** dynamicznie **. Sprawdzić. :) Mam zaktualizowaną odpowiedź. : D –
Ile razy rozmiar dziesiętny idzie, zawartość pozostaje dobra. Liczby będą ** wyrównane do prawej **, a treść będzie ** wyrównana do lewej **. To działa! Zaufaj mi! :) –
Na mojej witryny,
font-familyifont-sizezostaną zmienione przez użytkowników dynamicznie. Dlatego nie jestem w stanie ustawićpadding-left.
Dlaczego to powstrzymałoby cię przed użyciem padding-left? Jest to absolutnie właściwe narzędzie do użycia, gdy chcesz zastąpić domyślny arkusz stylów przeglądarki.
ul {
padding-left: 0;
/* If you want you can change the list type from inside or outside */
list-style: inside decimal;
}
W twoim przypadku liczby nie będą wyświetlane! –
@PraveenKumar Tak długo, jak kontener nie ma "przepełnienia: ukryte", będzie. – alex
Ale wygląda dziwnie, wychodząc z linii prostej w prawo? –
Jeśli chcesz mieć pewność, że twoja lista znajduje się w jednej linii z lewą granicą kontenera nadrzędnego, użyj własnego obrazu listy punktorów.
Można użyć następującego CSS, aby dostosować ULS:
UL {
margin-left: 0;
list-style: none outside url("myImage.png");
}
Nadzieja to pomaga! :)
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }
Domyślna odstęp na lewo, może być spowodowany przez lewą wyściółki lub lewym marginesie ol lub li, lub ich kombinacji (w zależności od przeglądarki). Aby uzyskać określone odstępy, ustaw wszystkie te właściwości na zero oprócz jednego z nich, który ustawisz na preferowaną wartość. Zwróć uwagę, że ten odstęp musi być wystarczająco duży dla znaczników list (liczb), w przeciwnym razie nie pojawią się lub zostaną obcięte. Wartość 1.3em (tj. 1,3-krotna wielkość czcionki) powinna być odpowiednio duża i pozostawić niewiele lub żadną dodatkową przestrzeń po lewej stronie.
Zresetuj wypełnienie za pomocą CSS. :) –