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

在display: inline-block;代码

上使用<li>

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

DEMO：http://jsfiddle.net/4nRPY/2/

Answer 3

你可以通过这种方式来扼杀那个

li{float:left;}

演示http://jsfiddle.net/4nRPY/3/

Answer 4

我更喜欢伪元素：

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

减少浏览器支持但没有多余的HTML标记，您可以通过更改一个CSS属性在整个网站中更改它。

如何对齐面包屑

4 个答案: