如何使用display創建水平列表：inline？

Question

我試圖創建一個水平顯示的服務列表，但display: inline不起作用。如何水平顯示li？

#services { 
    border-top: 1px solid #202020; 
    padding-top: 40px; 
} 

#services p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
} 

#services ul { 
    width: 160px; 
} 

#services ul li { 
    display: inline; 
} 

#services ul li h2 { 
    padding-top: 20px; 
    text-align: center; 
} 

<div id="services"> 
    <p><span>Services</span></p> 
    <ul> 
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li> 
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li> 
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li> 
    <li><h2>HEADING</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li> 
    </ul> 
    <div class="next"> 
     <a href="#"><img src="img/next.png" alt="Click for more information" /></a> 
    </div><!-- end next --> 

Answer 1

它們不是水平地顯示，或安排本身「內聯」以任何顯着的差異是由於ul太寬，以允許多於一個li在水平空間中顯示。

問題就在這裏

#services ul { 
    width: 160px; 
} 

刪除此寬度限制，允許一個以上的李書福水平適合。

此外，爲了達到我認爲您正在尋找的效果，請嘗試設置列表項目的設置寬度，並將顯示設置爲inline-block而不是內聯。這將創建我相信你正試圖實現的水平方塊。

例子：http://jsfiddle.net/xPCBK/1/

您需要更改CSS：

#services ul { 
    width: 160px; 
} 

#services ul li { 
    display: inline; 
} 

更改爲

#services ul { 
} 
#services ul li { 
    display: inline-block; 
    width: 160px; 
}