Question

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

ul li出现在另一个之下。

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。{/ p>

Answer 2

点击这里！如果您是自己需要的引导用户你应该有bootstrap.min.js

http://getbootstrap.com/2.3.2/components.html#breadcrumbs

<ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul>

Answer 3

li有两种冗余样式。

你可以删除这种风格：

.chatContainer ul li{ 
    float: left; clear: both; margin: 10px 0; 
    width: 100%; padding: 10px; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

另外，将li设为display: inline-block或正确清除浮点数：

#crumbs li {
    display: inline-block;
    line-height: 2.3em;
    color: #777;
    padding-left: .75em;
}

您的更新小提琴： http://jsfiddle.net/abhitalks/y9tyc2cu/2/

更新

根据您的评论，您无法删除或更改现有样式。在这种情况下，您需要覆盖在先前定义的样式中设置的样式。只需以#crumbs li样式添加这两个覆盖，而无需更改或删除其他任何内容：

width: auto; float: none;

所以，你的完整风格现在看起来像这样：L

#crumbs li {
    display: inline-block;
    line-height: 2.3em;
    color: #777;
    padding-left: .75em;
    width: auto; 
    float: none;
}

更新小提琴： http://jsfiddle.net/abhitalks/y9tyc2cu/6/

Answer 4

只需添加display:inline并从li

中删除float: left

例如

http://jsfiddle.net/y9tyc2cu/3/

水平对齐面包屑 - CSS

4 个答案:

更新