Как сохранить элементы списка на одной строке

Question

Я хотел бы сохранить свои элементы списка в одной строке.

Поэтому я хотел бы, чтобы Яблоки (включая Pink Lady, Gala и Fuji) были на одной линии. Сейчас он делает это на две линии.

Также, как мне создать пространство (около 30 пикселей) после моего списка перед тем, как начнется следующий раздел моего контента.

Вот мой jsfiddle: http://jsfiddle.net/eb46t5hu/11/

Вот мой HTML:

<div class="central-menu"> 
<ul class="category"> 
    <li class="category"> 
     <a class="central-menu" href="#CategoryApple">Apples</a> (includes Pink Lady, Gala and Fuji)</li> 
    <li class="category"> 
     <a class="central-menu" href="#CategoryOranges">Oranges</a> (includes Satsuma, Floria and California)</li> 
    <li class="category"> 
     <a href="#CategoryPears">Pears</a> (includes Big and Small)</li> 
</ul> 

<div id="CategoryApple"> 
<h3>Apples</h3> 
<p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p> 
</div> 

<div class="dotRule">&nbsp;</div> 

<div id="CategoryOranges"> 
<h3>Oranges</h3> 
<p>Juicy and sweet and renowned for its concentration of vitamin C, oranges make the perfect snack and add a special tang to many recipes;</p> 
</div> 

<div class="dotRule">&nbsp;</div> 

<div id="CategoryPears"> 
<h3>Pears</h3> 
<p>The pear is any of several tree and shrub species of genus Pyrus /ˈpaɪrəs/, in the family Rosaceae. It is also the name of the pomaceous fruit of these trees.</p> 
</div> 
    </div> 

Вот мой CSS:

ul.category { 
list-style: none; 
} 

li.category { 
float: left; 
width: 100%; 
    padding: 10px 0 10px 0; 
border-bottom: 1px solid #e0e5e9; 
} 

.central-menu { 
margin: 0 auto; 
width: 760px; 
clear: both; 
position: relative; 
z-index: 2; 
display: block; 
} 

a.central-menu:link { 
    color: #f66511; 
    text-decoration:none; 
} 
a.central-menu:hover { 
    color: #f66511; 
    text-decoration:underline; 
} 
a.central-menu:active { 
    color: #f66511; 
} 
a.central-menu:visited { 
    color: #f66511; 
} 

Answer 1

Удалить display:block по какой-то причине он делает текст толкания на следующий линия.

http://jsfiddle.net/eb46t5hu/12/