我正在尝试在2个箭头(左侧和右侧)中创建边框。
2个箭头之间有一条线。
.carousel-controls {
float: right;
width: 50%;
padding-top: 1rem;
padding-right: 1rem;
}
.carousel-controls span.next {
background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat;
width: 16px;
height: 10px;
}
.carousel-controls span {
display: inline-block;
float: left;
}
.carousel-controls span.prev {
background: url(https://s16.postimg.org/dx0m87tud/prev.png) no-repeat;
width: 16px;
height: 45px;
padding-right: 3rem;
}

<div class="carousel-controls">
<span class="prev"></span>
<span class="next"></span>
</div>
&#13;
线条从箭头顶部绘制并延伸到跨度的高度。如果可能,请告诉我。
非常感谢任何帮助。
答案 0 :(得分:2)
.carousel-controls {
float: right;
width: 50%;
padding-right: 1rem;
}
.carousel-controls span {
float: left;
width: 16px;
height: 45px;
}
.carousel-controls span.next {
background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat 100% 50%;
padding-left: 1.5rem;
}
.carousel-controls span.prev {
background: url(https://s16.postimg.org/dx0m87tud/prev.png) no-repeat 0% 50%;
padding-right: 1.5rem;
border-right: 1px solid gray;
}
&#13;
<div class="carousel-controls">
<span class="prev"></span>
<span class="next"></span>
</div>
&#13;
答案 1 :(得分:0)
这可能会对你有所帮助
.carousel-controls span.next {
background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat;
width: 16px;
height: 45px;
margin-left: 1.5rem;
background-position: 0 50%;
}
.carousel-controls span.prev {
background: url(https://s10.postimg.org/hdeqo479l/snext.png) no- repeat;
width: 16px;
height: 45px;
padding-right: 1.5rem;
background-position: 0 50%;
border-right: 1px solid #000;
}
答案 2 :(得分:0)
要执行此操作,您需要使用足够数量的填充来居中两个块元素,然后只为其中一个添加边框。
.carousel-controls {
position: relative;
width: 100%;
}
.carousel-controls span {
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
padding: 1rem;
width: 16px;
}
.carousel-controls span.next {
background-image: url(https://s10.postimg.org/hdeqo479l/snext.png);
border-left: 1px solid #666;
left: 50%;
}
.carousel-controls span.prev {
background-image: url(https://s16.postimg.org/dx0m87tud/prev.png);
right: 50%;
}
<div class="carousel-controls">
<span class="prev"></span>
<span class="next"></span>
</div>
答案 3 :(得分:0)
您需要在.prev
课程中添加 border-right 属性,并且margin-right
值与padding-right
相同,以使箭头之间的中心边界
margin-right: 3rem; border-right: 1px solid #000;
.carousel-controls {
float: right;
width: 50%;
padding-top: 1rem;
padding-right: 1rem;
}
.carousel-controls span.next {
background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat;
width: 16px;
height: 10px;
}
.carousel-controls span {
display: inline-block;
float: left;
}
.carousel-controls span.prev {
width: 16px;
height: 45px;
margin-right: 3rem;
padding-right: 3rem;
border-right: 1px solid #000;
}
&#13;
<div class="carousel-controls">
<span class="prev">←</span>
<span class="next">→</span>
</div>
&#13;