簡單間距CSS

Question

我爲我的網站設計了一個導航欄;你可以在http://jsfiddle.net/ToddStyles/D2tZH/看到它。

什麼CSS我會用改變它們之間的間距？我使用了一個無序列表來製作它，並將display更改爲inline。

Answer 1

當您以內聯方式顯示元素時，HTML會將任何空格解析爲空格字符。所以，你可以註釋掉列表項之間的空間，即：

<li>...</li><!-- 
--><li>...</li> 

或者，它們顯示爲塊級元素，並把它們飄浮：

ul { 
    overflow: hidden; /* To prevent collapse */ 
} 
ul li { 
    display: block; 
    float: left; 
} 

---

至於小提琴你已發佈，您已錯誤地使用<img>標記。它是自動關閉的，它不應該用來嵌套任何東西。

p/s：請不要使用鏈接縮短器，因爲由於缺乏代碼，SO會阻止您發佈小提琴鏈接。規則是有原因—爲我們提供代碼給你的問題上下文。

Answer 2

如果你正在尋找增加寬度，您可以將留有餘量，以連續<li>小號容易：

#navbar li + li { 
    margin-left: 0.2em; 
} 

Here’s your fiddle back.我固定它使用inline-block使佈局打破少的時候也不可避免地包在一個更小的屏幕上。並考慮到我們無法通過互聯網在計算機上看到圖像。