css - 水平对齐面包屑 - CSS

Question

我很难水平对齐面包屑。容器 div 有一个现有的样式表，其中的某些内容阻止了输出。

ul li 一个接一个地出现。

http://jsfiddle.net/y9tyc2cu/1/

HTML:

<div class="chatWrapper">
    <div class="chatContainer">
        <div class="chatMsgWrapper">
            <ul id="crumbs">
                <li><a href="#">Home</a>

                </li>
                <li><a href="#">Main section</a>

                </li>
                <li><a href="#">Sub section</a>

                </li>
                <li><a href="#">Sub sub section</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

ul#crumbs, ul#crumbs li {
    list-style-type:none;
    padding:0;
    margin:0;
}
#crumbs {
    height:2.3em;
    border:1px solid #dedede;
}
#crumbs li {
    float:left;
    line-height:2.3em;
    color:#777;
    padding-left:.75em;
}
#crumbs li a {
    /*background:url(/Assets/Images/crumbs.gif) no-repeat right center;*/
    background:gray;
    padding:5px 15px 5px 0;
}

Answer 1

Here是解决方案。 float: none; 对于每个 li 和 display: inline; 对于 ul。