HTML - 嵌套的ul標籤。字體大小的變化

我想做一個嵌套的無序列表和嵌套的ul標籤有一個更大的字體大小。下面是我使用的代碼行：HTML - 嵌套的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

任何人有一個想法，爲什麼嵌套UL字號較大？我希望整個列表具有相同大小的字體。

來源

2014-01-15 user3196289

如果你有一個鏈接到實時代碼而不是圖像，但我懷疑有一些全球風格的規則會讓你失望。這將是很好的，以確保你有一個reset你的CSS，然後定義你需要的規則。 ul和ul li ul很可能得到不同的規則，所以你可以通過定義兩個固定：

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

來源

2014-01-15 01:28:43 Zac

從你的描述，我想我只是有相同的問題。麻煩的是你指定的字體大小爲1.3em。 em是一個相對單位，這使得每個嵌套列表的字體大小都相對於它們的父級。當您嵌套1.3em遞歸應用時，所以您的下一個列表的字體大小爲（1.3 * 1.3）em。如果你有幾層嵌套列表，那麼你會得到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聲明繼承了第一個ul聲明中的所有內容，所以希望這應該是您需要做的所有事情。

來源

2014-08-05 21:25:00 Seej500

你的CSS說什麼是「每次我輸入一個<ul>標籤，我應該增加1.3倍的字體大小」。這就是你的內心<ul>得到更大的字體大小。

爲了解決這個問題，添加說嵌套規則<ul>，使其保持他們的父母的字體大小：

ul ul { 
    font-size:1em; 
}

來源

2014-08-05 23:03:29

如果像我一樣，你已經選擇了''ul' css作爲一個孩子，即'main ul'，這將不起作用，因爲'ul ul'不是特定的。只需使用'main> ul'。內部列表應該繼承它們的大小。 – Keith

我知道這個帖子是有點老了，但如果你想確保你的嵌套列表留與使用EM單元時父母大小相同，請嘗試：

ul { 
    font-size: 1em; 
} 

ul ul { 
    font-size: 100%; 
}

這會告訴那些嵌套列表爲父母大小的100％。

來源

2017-04-26 02:41:24 apmeyer

HTML - 嵌套的ul標籤。字體大小的變化

回答

相關問題