CSS - размер шрифта для детей с использованием em

Каков наиболее эффективный способ сделать все вложенные элементы списка одинаковыми по размеру при использовании em, который не равен 1. Например, я хочу, чтобы все ли в этом списке были размером до 0.85em родителя ul. Должен ли я создавать отдельный класс для каждого «уровня» глубины?CSS - размер шрифта для детей с использованием 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>

источник

2009-07-23 Jeremy

Должно работать.

li li {font-size: 100%;}

источник

2009-07-23 20:36:38 Matt

Это так, но это не самый эффективный способ. –

@Bobby, почему это не самый эффективный способ? – You

Без добавления дополнительной разметки на вашу страницу это самый простой способ. – Matt

Я хочу, чтобы все Ли в этом списке, чтобы иметь размеры 0.85em родителя ЛУ в

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

бы сделать

источник

2009-07-23 20:09:16

-1

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

источник

2009-07-23 20:12:33 Quentin

Моя рекомендация будет дайте первому <ul> идентификатор или класс и установите там font-size.

источник

2009-07-23 20:12:34 jimyi

(Этот ответ подразумевает, что вы хотите, чтобы все Li-элементам тот же размер (вы говорите и что вы хотите, чтобы один и тот же размер и разного размера в этом вопросе))

каскадов размера шрифта, так что если вы просто установите его на внешний элемент (скажем, обертки div или что-то еще), все внутри него будет на один шаг меньше, как (я думаю), вы хотите.

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

#navigation { font-size: 0.85em; }

источник

2009-07-23 20:12:43

Приведенный выше пример работает так, как должен. Даже в IE6 это не поддерживает дочерний селектор. –

Правда - я работал с HTML, который он нам дал. Он не уточнил совместимость браузера, поэтому я предполагаю, что он хочет что-то, что соответствует спецификации CSS2.1. –

Где в вопросе он говорит, что хочет, чтобы они были разных размеров? –

Я согласен с Эмилем и проголосую за него, если бы у меня было достаточно очков rep (n00b здесь). Я бы использовал класс, как он упоминает в своем первом пункте, поэтому его можно использовать повторно в том же документе. Если вы хотите использовать перекрестный браузер и используете текущую спецификацию css, то я не могу предложить лучший пример в реальном мире ..... бросьте на css 3 и смерть IE6!

источник

2009-07-23 21:21:47 Crayonz

Спасибо за моральную поддержку! :) –

Его как я это сделаю, и я думаю, что было несправедливо пометить тебя, потому что на самом деле он прав и дал хороший совет. – Crayonz

Используйте блок «rem» для выбора размера шрифта. Это устраняет проблему наследования шрифтов.

У Джонатана Снука есть great article.

источник

2011-07-09 21:16:53 chotchki

Да, это действительно лучший способ. Я могу добавить только вы должны использовать значение fall-back с использованием пикселей. Например: li {font-size: 8.5px; font-size: 0.85em;} И вы должны установить размер базового шрифта не на элемент body, как обычно, а на html. –

@MikeEshva: ваш пример css должен быть {font-size: 8.5px; font-size: 0.85rem;} – chotchki

да, порядок имеет значение! –

CSS - размер шрифта для детей с использованием em

ответ

Смежные вопросы