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。但是，在左浮动时，您必须在此之后立即清除元素。

#breadcrumb ul li{
    float: left;
}

Answer 2

You can this way to chive to that

li{float:left;}

Demo http://jsfiddle.net/4nRPY/3/

Answer 3

I prefer a pseudo element:

JSFiddle

HTML

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

CSS

#breadcrumb ul li:after {
    content:">";
    padding:0 0.5em;
}

#breadcrumb ul li:last-child:after {
    content:"";
    padding:0;
}

Slighty less browser support but no extraneous HTML mark-up and you can change it throughout your site by changing one CSS property.

Answer 4

display: inline-block;在您的<li>标签上使用

#breadcrumb ul li {
    display: inline-block;
}

演示：http: //jsfiddle.net/4nRPY/2/