html - 如何让我的列表项保持在一行

Question

我想将我的列表项放在一行上。

所以我希望 Apples(包括 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/