html - 如何对齐面包屑

Question

我的副标题中有一个面包屑，但事件面包屑出现在列表下方。我希望它们都在同一条线上。

HTML:

<div id="breadcrumb">

    <ul>            
                        <li><a href="http://test.demo.variouk.com/">Home</a> &gt;</li>          
                        <li class="active">Marketing Items</li>        </ul>    </div>

CSS:

#breadcrumb {
font-size:11px;
background-color:#F2F2F2;
}

#breadcrumb ul {
margin:0px;
margin-bottom:0px;
margin-left:4px;
list-style: none;
background-color:#F2F2F2;
}

#breadcrumb .active {
color:#B3B3B3;

}

这也是 jsfiddle:http://jsfiddle.net/4nRPY/

Answer 1

使用float:left 或display: inline-block。但是，对于 float left，您必须在之后立即清除该元素。

#breadcrumb ul li{
    float: left;
}