Html 如何将列表项保持在一行上

我想将我的列表项目保留在一行上

所以我希望苹果包括粉红女士，嘎拉和富士在一条线上。现在它有两条线

另外，如何在我的列表后30像素左右创建空间，然后再开始下一部分内容

以下是我的JSFIDLE：

这是我的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>

删除显示：由于某种原因，它会将文本推到下一行

---

在其他内容开始之前，我如何在ul底部添加50的边距？

    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;
}