Question

我在jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/中创建了一个自定义面包屑。缩小页面宽度时，文本位于最后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个面包屑的大小完全相同？在第一个时刻，第一个比另一个更大。

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

自定义面包屑css伸展问题

0 个答案: