問(wèn)題描述

我在學(xué)習(xí)慕課網(wǎng)的網(wǎng)頁(yè)布局基礎(chǔ)時(shí)碰到這樣的問(wèn)題，相同的html和css代碼，設(shè)置font-family之前是這樣：

在設(shè)置了*{font-family:Arial, Helvetica, sans-serif,'宋體';}這條css之后就變成了這樣：

剛開(kāi)始學(xué)習(xí) html+css ，很迷惑。

問(wèn)題解答

這種一般都會(huì)用ul>li這樣的結(jié)構(gòu)去寫(xiě)，然后再把li的display設(shè)置為inline-block，就橫過(guò)來(lái)了。但是li和li之間一般都是有起碼一個(gè)換行的，比如：

<ul> <li>A</li> <li>B</li></ul>

這種就是帶換行符的，而除非你寫(xiě)成：

<ul><li>A</li><li>B</li></ul>

否則換行符就會(huì)造成li之間的間隙，也就是你圖1里換行問(wèn)題的原因。（張?chǎng)涡翊笊竦牟┛屠镎f(shuō)過(guò)這個(gè)東西，建議你去看下~）而如果設(shè)置了全局字體的話，一個(gè)可能是會(huì)讓換行符“更瘦”，所以會(huì)把第二行拉上來(lái)。

猜測(cè)： 將你html中ul,li這樣的標(biāo)簽之間的空格和換行都去掉試試。