Z HTML-ową listą jest jak w życiu, albo wszystko się układa jak powinno, albo chybiamy z osiągnięciami naszych celów. Nie zawsze da się ustrzelić pluszowego misia dla dziewczyny na strzelnicy. Nie zawsze komplet kluczy nasadowych dla chłopaka okaże się brakującym elementem jego warsztatu. Tyle, że listę można szybko naprawić, natomiast w przypadku wymienionych sytuacji, trzeba kupić kolejny bilet lub zatryndalać z paragonem do marketu.
Ch(a), ch(a), ch(a)!
Choć jeszcze nie jest śmieszne, to zaraz zobaczysz jak wiele radości sprawi Ci rozwiązanie na listowe bolączki i być może zaśmiejesz się głośno w myśli. O px, %, em, rem, deg, pewnie słyszałeś. A czy słyszałeś o jednostce ch? Tak, jest rzadko używana, ale dziś będzie użyteczna. ch, to jednostka względna odpowiadająca szerokości znaku 0 (zero) dla aktualnego fontu, rozmiaru, stylu, itd., czcionki, którą dziedziczy lub używa element. I jest to bardzo fajna właściwość, bo przecież z samego rozmiaru fontu nie jesteśmy w stanie wywnioskować jaką szerokość ma tenże znak.
Wróćmy do naszego problemu. Lista wypunkowana.
<ul>
<li>What is Lorem Ipsum?</li>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</li>
<li>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
Efekt taki jak się domyślamy:
Ale nie każdemu przypadą do gust kropki wypunktowania i wcięcie listy. Jeśli ustawimy padding na 0, otrzymamy:
Domyślnie lista ma ustawione położenie punktów na list-style-position:outside, kiedy zmienimy na inside, otrzymamy:
Druga linijka nie ma wcięcia. Zresztą i tak nam się nie podoba styl wypunktowania. Wyrzućmy całkowicie kropki i dodajmy swoje:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li:before {
content: '';
border-radius: 50%;
width: 5px;
height: 5px;
display: inline-block;
background: #f00;
vertical-align: middle;
margin-right: 5px;
margin-top: -3px;
}
Zamiast kropki wstawiamy własny element (tu pseudoelement). Jego wyrównanie w pionie niestety musimy dobrać eksperymentalnie (margin-top). Jak zapewne zauważyłeś wyrównanie linijek nie wygląda najepiej. Dodajemy jednak szczyptę ch (jednostki! nie mylić z niczym innym!):
li {
text-indent: -1ch;
margin-left: 1ch;
}
I efekt jest taki:
Występuje niewielka różnica między pierwszą, a kolejnymi linjkami. Tą możemy zniwelować zwiększając wcięcie, np: calc(-1ch - 2px).
Następny trafiony cel - kolejny artykuł. Do przeczytania!
Przydatne linki:
Jednostka ch.