Question

当我在面包屑中输入一个长文本时，它们会破坏......有什么想法吗？

随意小提琴： http://jsfiddle.net/neodjandre/pbEpG/

.breadsmall ul{margin:0px;}
.breadsmall ul li{display:inline-block;height:20px;line-height:20px;width:100px;text-indent:10px;text-align:center;position:relative;margin:5px 1px 0 0;}
.breadsmall ul li:before{content:" ";height:0;width:0;position:absolute;left:-2px;z-index:0;border-color:transparent transparent transparent #fff;border-style:solid;border-width:10px 0 10px 10px;}
.breadsmall ul li:first-child:before{border-color:transparent;}
.breadsmall ul li a:after{content:" ";height:0;width:0;position:absolute;right:-10px;z-index:10;border-color:transparent transparent transparent #e8e8e8;border-style:solid;border-width:10px 0 10px 10px;}
.breadsmall ul li a{display:block;background: #e8e8e8;font-family:Century Gothic, sans-serif;font-size:1em;color:#666666}
.breadsmall ul li a:hover{background:#1f1f1f;color:#eaeaea;}
.breadsmall ul li a:hover:after{border-color:transparent transparent transparent #1f1f1f;}
.breadsmall ul li.active a{background:#1f1f1f;z-index:100;color:#eaeaea;}
.breadsmall ul li.active a:after{border-left-color:#1f1f1f;}

Answer 1

min-width: 100px;使用width: 100px;代替<li>。

.breadsmall ul li {
    min-width: 100px;   
}

看起来像这样：http://jsfiddle.net/MRSallee/pbEpG/1/

那匹配你想要的东西？

Breadcrumbs代码修复了长文本

1 个答案: