jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/でカスタム ブレッドクラムを作成しました。ページの幅を縮小すると、テキストは最後の 2 つのブレッドクラムでは 2 行になりますが、最初のブレッドクラムでは 1 行だけになります。これにより、灰色の背景が最初のブレッドクラムで他の 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 つのブレッドクラムをすべてまったく同じサイズにするにはどうすればよいですか? 現時点では、最初の 1 つは他の 2 よりも大きいです。
助けていただける方、よろしくお願いします!