HTML-вложенные теги ul. Изменения размера шрифта

Question

Я пытаюсь сделать вложенный неупорядоченный список, а вложенный тег ul имеет больший размер шрифта. Вот строка кода, я использую:

<ul> 
<li>myItem 1</li> 
<li>myItem 2 
    <ul> 
    <li>myItem 2a</li> 
    </ul> 
</li> 
<li>myItem 3</li> 
<li>myItem 4</li> 
</ul> 

Вот мой style.css:

ul { 
    font-size: 1.3em; 
    margin-left: 80px; 
    margin-bottom: 20px; 
} 

У меня нет достаточного количества очков репутации включать фотографию, но вы можете увидеть результат код здесь:

http://crazyrogue.net/ulexample.jpg

Кто-нибудь есть идея, почему вложенная размер шрифта уль больше? Я хочу, чтобы весь список имел одинаковый размер шрифта.

Answer 1

Было бы полезно, если бы у вас была ссылка на живой код вместо изображения, но я подозреваю, что существуют правила глобального стиля, которые вас отключают. Было бы неплохо убедиться, что у вас есть reset для вашего css, а затем укажите правила, которые вам нужны. ul и ul li ul, вероятно, получить различные правила, чтобы вы могли исправить путем определения для обоих:

ul, ul li ul { 
    font-size: 1.3em; 
    margin-left: 80px; 
    margin-bottom: 20px; 
} 

Answer 2

Из вашего описания, я думаю, я просто была точно такая же проблема. Проблема в том, что вы указали размер шрифта как 1.3em. Em - относительная единица, и это делает размер шрифта каждого из ваших вложенных списков относительно их родителя. Когда вы вставляете, 1.3em применяется рекурсивно, поэтому ваш следующий список имеет размер шрифта (1.3 * 1.3). Если у вас есть несколько уровней вложенных списков, вы получите 1.3 * 1.3 * 1.3 и т. Д.

Стоит отметить, кстати, что это не будет проблемой для всех браузеров - мой новый Android-телефон не дает мне никаких проблем, но мой старый делает.

Во всяком случае, что-то подобное должно решить эту проблему для вас:

ul { 
    font-size: 1.3em; /*your original code*/ 
    margin-left: 80px; 
    margin-bottom: 20px; 
} 

ul li ul { 
    font-size: 1.0em; /*stops nested lists scaling*/ 
} 

Вот что работает для меня. Конечно, вторая декларация ul наследует все остальное от первого, так что, надеюсь, это должно быть все, что вам нужно сделать.

Answer 3

Что вы сказали в CSS, «каждый раз, когда я ввожу тег <ul>, я должен увеличить размер шрифта на 1,3x». Вот как ваш внутренний <ul> получил больший размер шрифта.

Чтобы это исправить, добавить правило, говорят, что вложенное <ul> s сохранить размер шрифта своего родителя:

ul ul { 
    font-size:1em; 
} 

Answer 4

Я знаю, что этот пост немного старый, но если вы хотите, чтобы убедиться, что ваши вложенные списки остаются такой же размер, как родитель при использовании блоков EM, попробуйте:

ul { 
    font-size: 1em; 
} 

ul ul { 
    font-size: 100%; 
} 

Это говорит те вложенные списки, чтобы быть 100% от размера родителей.