Przykład ceny:Jak wyrównać indeks górny do tekstu głównego w HTML
Chciałbym użyć superscript w mojej cenie. Jeśli cena wynosi 10 USD i 89 centów, chciałbym, aby 89 centów było wyrównanych do 10 USD z superskryptem. Przy użyciu <sup> zastosowano indeks górny, ale część "89" idzie dalej, niż chciałbym. Jeśli przyjrzeć się zdjęciu, góra 89 musiałaby być dostosowana do góry 10.
Daj vertical-align: top; do <sup> tagu
<style>
.cents {
font-size: 70%;
position: relative;
bottom: 0.3em;
}
</style>
$100<span class=cents>89</span>
ten działa bardziej niezawodnie w różnych przeglądarkach niż znacznik <sup> lub właściwość vertical-align (patrz longish explanation). Wybór wartości bottom (odpowiedniej dla wybranego font-size) nie jest nauką ścisłą, ponieważ chodzi o to, aby przesunąć element o taką samą wysokość, jak wysokość cyfr, ale wymaga to pewnych eksperymentów.
Dziękuję ... To działało jak czar. –
To była idealna poprawka dla innego wspólnego problemu z indeksami górnymi - próba uniknięcia zmiany wysokości linii i zepsucia pozycji pozostałej części tekstu/elementów :-) –
Dziękuję. Przetestowałem to i zadziałało. –
Zazwyczaj działa. Ale może powodować problemy z niektórymi rozmiarami i czcionkami, szczególnie gdy używasz czcionek, które nie używają pełnej wysokości do renderowania liczb. Jeśli twoje czcionki, rozmiary itp. Nie zmieniają się zbytnio, powinno to być wystarczająco dobre rozwiązanie. – techfoobar
Jeśli nie masz ścisłego związku z HTML5, mogę zaoferować Ci rozwiązanie oparte na różnych przeglądarkach. – techfoobar