How to create horizontal lists using display:inline? - css

Question

I'm trying to create a horizontally displayed list of services, however display: inline isn't working. How do I display the li's horizontally?
#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">
<img src="img/next.png" alt="Click for more information" />
</div><!-- end next -->

Answer 1

They are not showing horizontally, or arranging themselves 'inline' with any noticeable difference due to the ul being too wide to allow more than one li to show in that horizontal space.
the issue is here
#services ul {
width: 160px;
}
remove this width restriction to allow more than one li to fit horizontally.
Furthermore, to achieve the effect I believe you are looking for, try settings a set width for the list items and and settings the display to inline-block rather than inline. This will create the horizontal blocks that I believe you are attempting to achieve.
Example: http://jsfiddle.net/xPCBK/1/
The css you need to change:
#services ul {
width: 160px;
}
#services ul li {
display: inline;
}
Change this to
#services ul {
}
#services ul li {
display: inline-block;
width: 160px;
}