Czy istnieje sposób na dostosowanie pozycji obrazu w stylu listy?
Kiedy używam wypełnienia dla elementów listy, obraz pozostanie na swoim miejscu i nie będzie się przesuwał z wypełnieniem ...
css
image
html-lists
datisdesign
źródło
źródło
list-style-image
jeśli nie można go ustawić? Wygląda na to, że w rezultacie większość ludzi stosuje obejścia takie jak::before
ibackground-image
zamiast tego.Odpowiedzi:
Nie całkiem. Twoje wypełnienie (prawdopodobnie) jest stosowane do elementu listy, więc wpłynie tylko na rzeczywistą zawartość elementu listy.
Połączenie stylów tła i dopełnienia może stworzyć coś, co wygląda podobnie, np
Być może chcesz dodać styl do kontenera listy nadrzędnej (ul), aby ustawić pozycje listy wypunktowanej, ten artykuł A List Apart ma dobre odniesienie początkowe.
źródło
top
wartości zadziałała dla mnie zamiast górnej wyściółki.background: url(images/bullet.gif) no-repeat left 8px;
Zwykle ukrywam typ listy i używam obrazu tła, który jest ruchomy
„7px 7px” jest tym, co wyrównuje obraz tła wewnątrz elementu i jest również względem wypełnienia.
źródło
Możliwe rozwiązanie tego pytania, o którym jeszcze nie wspomniano, jest następujące:
Możesz teraz użyć górnej / lewej części li: before, aby ustawić nowy punktor. Zwróć uwagę, że szerokość i wysokość li: before muszą mieć takie same wymiary, jak wybrany obraz tła. Działa to w przeglądarce Internet Explorer 8 i nowszych.
źródło
Miałem ten sam problem, ale nie mogłem użyć opcji tła (i nie chciałem używać wielu środowisk), więc pomyślałem o innym rozwiązaniu
to jest przykład menu, które ma kwadratowy wskaźnik dla aktywnej / bieżącej pozycji menu (domyślny styl listy jest ustawiony na Brak w innej regule)
tworzy kwadrat za pomocą znaku kwadratu z pseudoklasą „: before” i można go dowolnie pozycjonować za pomocą pozycjonowania bezwzględnego.
źródło
Oto, co zrobiłem, aby małe szare bloki były po lewej stronie i pośrodku tekstu ze zwiększoną wysokością linii:
Mam nadzieję, że to komuś pomoże: D
źródło
Ostatecznie zdecydowałem się na zmodyfikowanie samego obrazu, aby dodać trochę odstępów.
Używanie obrazu tła na li, jak niektórzy sugerują, działa w wielu przypadkach, ale kończy się niepowodzeniem, gdy lista jest używana razem z obrazkiem pływającym (na przykład, aby tekst zawinął się wokół obrazu).
Mam nadzieję że to pomoże.
źródło
Inną opcją, którą możesz zrobić, jest:
Użyj (0 3px), aby ustawić obraz listy.
Działa w IE8 +, Chrome, Firefox i Opera.
Używam tej opcji, ponieważ możesz łatwo zamienić styl listy i jest duża szansa, że nawet nie będziesz musiał używać obrazu. (skrzypce poniżej)
http://jsfiddle.net/flashminddesign/cYAzV/1/
AKTUALIZACJA:
To uwzględni tekst / treść przechodzącą do drugiej linii:
Dodaj dopełnienie po lewej: do li, jeśli chcesz mieć więcej miejsca między punktorem a treścią.
http://jsfiddle.net/McLeodWebDev/wfzwm0zy/
źródło
Lub możesz użyć
źródło
Myślę, że naprawdę chcesz dodać wypełnienie (obecnie dodajesz do <li>) do tagu <ul>, a następnie punkty będą przesuwać się wraz z tekstem <li>.
Istnieje również pozycja w stylu listy, na którą możesz spojrzeć. Wpływa na sposób zawijania linii wokół obrazów punktorów.
źródło
jak odpowiedź „darren”, ale niewielka modyfikacja
działa w różnych przeglądarkach, wystarczy dostosować dopełnienie i marginesy
Edytuj zagnieżdżone: dodaj ten styl, aby dodać lewy margines do pod-zagnieżdżonej listy
źródło
Używam czegoś takiego, wydaje mi się całkiem czysty i prosty:
Powyższy kod działa tak, jak w większości moich przypadków.
W celu dokładnej regulacji możesz zmodyfikować
vertical-align
, np .:Można ustawić
list-style: none
nali
zamiastul
jeśli wolisz.źródło
Zaakceptowana odpowiedź wydaje mi się trochę dziwna, zdecydowanie też musi przepychać się dodatkowymi komendami dopełnienia i css.
Nigdy nie dodaję dopełnienia do listy elementów osobiście, zwykle kontrolując wysokość wiersza i sporadyczny margines wystarczy.
Kiedy mam problem z wyrównaniem z niestandardowymi obrazami w stylu listy, po prostu dodaję piksel lub dwa dodatkowe miejsce wokół dowolnej strony, która jest wymagana, aby dostosować jej położenie względem każdej linii listy.
źródło
rozwiązanie z fontawesome
źródło
Ukryj domyślny obraz punktora i używaj go,
background-image
ponieważ masz znacznie większą kontrolę, na przykład:źródło
źródło