0

我在 jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/中创建了一个自定义面包屑。当您缩小页面宽度时，文本位于最后 2 个面包屑的 2 行上，但仅位于第一个面包屑的一行上。这会导致第一个面包屑的灰色背景与其他 2 个面包屑不一致。我怎样才能让它始终是最大面包屑的最大高度，所以无论一个人是否有一条线，它们都是统一的高度文本和另外 2 行文本？

   <div id="breadcrumb-container">
        <ul class="breadcrumb">
            <li><a href="#">Surgery Started</a></li>    
            <li class="current"><a href="#">Surgery Started</a></li>
            <li><a href="#">Surgery Compl'd</a></li>
        </ul>           
    </div>  


 div#breadcrumb-container {
width:100%;
}

div#breadcrumb-container li {
width: 33%;
}

div#breadcrumb-container li:last-child {
width: 34%;
}

.breadcrumb { 
list-style: none; 
overflow: hidden;     
font: 13px Helvetica, Arial, Sans-Serif;         
}
.breadcrumb li { 
float: left; 
background: #C7C7C7;

}
.breadcrumb li a {
color: white;
text-decoration: none; 
padding: 5px 5px 5px 45px;
position: relative; 
display: block;
}

.breadcrumb li a:after { 
content: " "; 
display: block; 
width: 0; 
height: 0;
border-top: 50px solid transparent;          
border-bottom: 50px solid transparent;
border-left: 30px solid #C7C7C7;
position: absolute;
top: 50%;
margin-top: -50px; 
left: 100%;
z-index: 2; 
}

.breadcrumb li a:before { 
content: " "; 
display: block; 
width: 0; 
height: 0;
border-top: 50px solid transparent;       
border-bottom: 50px solid transparent;
border-left: 30px solid #001940;
position: absolute;
top: 50%;
margin-top: -50px; 
margin-left: 3px;  
left: 100%;
}

.breadcrumb li:first-child a {
padding-left: 12px;
border:none;
}

.breadcrumb li:last-child a:after {
border:none;    
}

.breadcrumb .current {
background:#007ACC; color:#fff;
pointer-events: none;
cursor: default; 
}

.breadcrumb .current a:after {
 border-left-color:#007ACC;
 pointer-events: none;
cursor: default;
}

.breadcrumb li a:hover { background: #007ACC;  }
.breadcrumb li a:hover:after { border-left-color: #007ACC !important; }

另外，如何使所有 3 个面包屑的大小完全相同？在那一刻，第一个比另一个大 2 个。

提前感谢任何可以提供帮助的人！

4

0 回答 0