CSS - rozmiar czcionki podrzędnej za pomocą em

Jaki jest najskuteczniejszy sposób, aby wszystkie zagnieżdżone elementy listy były tego samego rozmiaru podczas używania em, który nie jest równy 1. Na przykład, chcę, aby wszystkie li na tej liście miały rozmiar do 0,85em matki rodzica. Czy muszę utworzyć oddzielną klasę dla każdego "poziomu" głębokości?CSS - rozmiar czcionki podrzędnej za pomocą em

<html> 
<head> 
    <style type="text/css"> 
     li 
     { 
      font-size: 0.85em; 
     } 
    </style> 
</head> 
<body> 
    <ul> 
     <li>Level 1 item 
      <ul> 
       <li>Level 2 item 
        <ul> 
         <li>Level 3 item</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

Źródło

2009-07-23 Jeremy

Powinien działać.

Źródło

2009-07-23 20:36:38 Matt

Ma, ale nie jest to najbardziej efektywny sposób. –

@Bobby, dlaczego nie jest to najbardziej efektywny sposób? – You

Bez dodawania dodatkowych znaczników do strony jest to najprostszy sposób. – Matt

Chcę wszystko li w tym liście, aby być dobierane do 0.85em rodzica ul za

body > ul { font-size: 0.85em; }

zrobiłby tego

Źródło

2009-07-23 20:09:16

-1

li { font-size: 0.85em; } 
li li { font-size: 1em; }

Źródło

2009-07-23 20:12:33 Quentin

Moja rekomendacja byłoby podaj pierwszy identyfikator lub klasę i ustaw tam numer font-size.

Źródło

2009-07-23 20:12:34 jimyi

(Odpowiedź ta zakłada, że chcesz wszystkie Li-elementy tego samego rozmiaru (można powiedzieć, że zarówno chcesz ten sam rozmiar i inny rozmiar w pytaniu))

kaskady font-size, więc jeśli tylko ustaw ją na zewnętrznym elemencie (powiedzmy owijkę lub coś w tym stylu), wszystko wewnątrz niej będzie o jeden krok mniejsze jak (myślę), że chcesz.

<div id="navigation"> 
    <ul> 
     <li>...</li> 
     <li> 
     <ul><li>...</li><li>...</li></ul> 
     </li> 
    </ul> 
</div> 

#navigation { font-size: 0.85em; }

Źródło

2009-07-23 20:12:43

Powyższy przykład działa jednak tak, jak powinien. Nawet w IE6 nie obsługuje to selektora podrzędnego. –

Prawda - Pracowałem z kodem HTML, który nam dał. Nie określił zgodności przeglądarki, więc zakładam, że chce czegoś, co będzie zgodne ze specyfikacją CSS2.1. –

Gdzie w pytaniu mówi, że chce, aby miały różne rozmiary? –

Zgadzam się z Emilem i zagłosuję na niego, jeśli będę miał dość punktów rep (tutaj n00b). Użyłbym klasy, o której wspomina w swoim pierwszym punkcie, więc można ją ponownie wykorzystać w tym samym dokumencie. Jeśli chcesz mieć przeglądarkę i używasz aktualnej specyfikacji css, to nie mogę zaproponować lepszego przykładu na świecie ..... uruchom na css 3 i na śmierć IE6!

Źródło

2009-07-23 21:21:47 Crayonz

Dzięki za wsparcie moralne! :) –

To, jak bym to zrobił, i myślę, że to było nieuczciwe, aby cię oznaczyć za to, że jest w porządku i daje dobrą radę. – Crayonz

Użyj jednostki "rem" do zmiany rozmiaru czcionki. Naprawia to problem z dziedziczeniem czcionek.

Johnathan Snook ma na ten temat numer great article.

Źródło

2011-07-09 21:16:53 chotchki

Tak, to rzeczywiście najlepsza metoda. Mogę dodać tylko, że powinieneś użyć wartości odskoku za pomocą pikseli. W ten sposób: li {rozmiar-czcionki: 8.5px; rozmiar czcionki: 0.85em;} I powinieneś ustawić podstawowy rozmiar czcionki nie na elemencie body tak jak zwykle, ale na html. –

@MikeEshva: Twój przykład css powinien mieć {wielkość czcionki: 8.5px; rozmiar czcionki: 0.85rem;} – chotchki

tak, kolejność ma znaczenie! –

CSS - rozmiar czcionki podrzędnej za pomocą em

Odpowiedz

Powiązane problemy