Question

我希望将我的列表项保存在一行。

所以我希望苹果（包括Pink Lady，Gala和Fuji）在一条线上。现在它将它分为两行。

此外，如何在我的内容的下一部分开始之前在列表之后创建空间（大约30个像素）。

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

如何将列表项保存在一行中

1 个答案: