水平对齐面包屑-CSS

我很难将面包屑水平对齐。 容器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>

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

检查这里！ 如果您是引导用户，则需要 你应该

/
/
数据

检查这里！ 如果您是引导用户，则需要 你应该

/
/
数据

对于

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

设置为

显示：内联块

或正确清除浮动：

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

您的最新小提琴：

更新： 根据您的评论，您不能删除或更改现有样式。在这种情况下，需要替代在先前定义的样式中设置的样式。只需以

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

更新的小提琴：

---

.

对于

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

设置为

显示：内联块

或正确清除浮动：

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

您的最新小提琴：

更新： 根据您的评论，您不能删除或更改现有样式。在这种情况下，需要替代在先前定义的样式中设置的样式。只需以

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

更新的小提琴：

---

.

只需添加

display:inline

并从li中删除

float:left

范例

---

只需添加

display:inline

并从li中删除

float:left

范例

---

是解决方案<代码>浮动：无对于每个

li

和

显示：内联对于
ul
是解决方案<代码>浮动：无对于每个
li
和
显示：内联用于
ul
谢谢。但我无法删除现有样式。有没有办法，我可以为同一个类添加另一个类并使其无效。我刚刚添加了
.chatul li{}
，但没有效果，谢谢。但我无法删除现有样式。有没有办法，我可以为同一个类添加另一个类并使其无效。我刚刚添加了
.chatul li{}
，但没有效果