我的顶部有3个面包屑箭头。当我单击轮播主体中具有第一张幻灯片的三个(石膏板,混凝土,加气混凝土和砖)的图像时,其中一个箭头将移到最左侧。我希望它停留在中间或在右边发生。
锚导航
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li.active a {
background: #5fdba7;
/*#5fdba7 -- front part of arrow of active RED*/
margin-left: 655px;
}
.breadcrumb li.completed a {
background: brown;
/* fallback color */
background: #ffc107;
}
.breadcrumb li.active a:after {
border-left: 30px solid #5fdba7;
padding-left: 65px;
}
.breadcrumb li.completed a:after {
border-left: 30px solid #ffc107;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 10px 10px 45px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(0, 0%, 83%, 1);
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;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
color: white;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
.selector-for-some-widget {
box-sizing: content-box;
}
.carousel-inner img {
width: 100%;
height: 100%;
margin-top: -13px;
}
.buttonContainer {
margin-top: 130px;
margin-left: -180px;
}
* {
outline-style: none;
}
#heroText {
font-family: Impact;
letter-spacing: 0.5px;
text-decoration: underline;
}
我希望箭头向右并按顺序排列。
例如,“开始”>“处理”>“结束”(根据用户的状态,此选项将一一显示在最右边。
相关分类