Html CSS边框在2个箭头内

我试图在两个箭头（左箭头和右箭头）内创建一个边框

截图--

两个箭头之间有一条直线

.carousel控件{
浮动：对；
宽度：50%；
垫面：1毫米；
右侧填充：1rem；
}
.carousel控件span.next{
背景：url(https://s10.postimg.org/hdeqo479l/snext.png)不重复；
宽度：16px；
高度：10px；
}
.旋转木马控制范围{
显示：内联块；
浮动：左；
}
.carousel控件span.prev{
背景：url(https://s16.postimg.org/dx0m87tud/prev.png)不重复；
宽度：16px；
高度：45px；
填充权：3rem；
}

这可能会对您有所帮助

这可能对你有帮助

.carousel控件{
浮动：对；
宽度：50%；
右侧填充：1rem；
}
.旋转木马控制范围{
浮动：左；
宽度：16px；
高度：45px；
}
.carousel控件span.next{
背景：url(https://s10.postimg.org/hdeqo479l/snext.png)无重复100%50%；
左侧填充：1.5雷姆；
}
.carousel控件span.prev{
背景：url(https://s16.postimg.org/dx0m87tud/prev.png)无重复0%50%；
右侧填充：1.5rem；
右边框：1px纯色灰色；
}

.carousel控件{
浮动：对；
宽度：50%；
右侧填充：1rem；
}
.旋转木马控制范围{
浮动：左；
宽度：16px；
高度：45px；
}
.carousel控件span.next{
背景：url(https://s10.postimg.org/hdeqo479l/snext.png)无重复100%50%；
左侧填充：1.5雷姆；
}
.carousel控件span.prev{
背景：url(https://s16.postimg.org/dx0m87tud/prev.png)无重复0%50%；
右侧填充：1.5rem；
右边框：1px纯色灰色；
}

---

要做到这一点，您需要使用足够的填充量将两个块元素居中，然后只需为其中一个添加边框即可

.carousel控件{
位置：相对位置；
宽度：100%；
}
.旋转木马控制范围{
背景位置：中心；
背景重复：无重复；
光标：指针；
显示：内联块；
高度：10px；
位置：绝对位置；
填充：1rem；
宽度：16px；
}
.carousel控件span.next{
背景图片：url(https://s10.postimg.org/hdeqo479l/snext.png);
左边框：1px实心#666；
左：50%；
}
.carousel控件span.prev{
背景图片：url(https://s16.postimg.org/dx0m87tud/prev.png);
右：50%；
}

---

要做到这一点，您需要使用足够的填充量将两个块元素居中，然后只需为其中一个添加边框即可

.carousel控件{
位置：相对位置；
宽度：100%；
}
.旋转木马控制范围{
背景位置：中心；
背景重复：无重复；
光标：指针；
显示：内联块；
高度：10px；
位置：绝对位置；
填充：1rem；
宽度：16px；
}
.carousel控件span.next{
背景图片：url(https://s10.postimg.org/hdeqo479l/snext.png);
左边框：1px实心#666；
左：50%；
}
.carousel控件span.prev{
背景图片：url(https://s16.postimg.org/dx0m87tud/prev.png);
右：50%；
}

---

您需要在

.prev

类中添加右边框属性，

右边框

值与

右边框

相同，以使箭头之间的边框居中

保证金权：3rem；
右边框：1px实心#000


.carousel控件{
浮动：对；
宽度：50%；
垫面：1毫米；
右侧填充：1rem；
}
.carousel控件span.next{
背景：url(https://s10.postimg.org/hdeqo479l/snext.png)不重复；
宽度：16px；
高度：10px；
}
.旋转木马控制范围{
显示：内联块；
浮动：左；
}
.carousel控件span.prev{
宽度：16px；
高度：45px；
保证金权利：3rem；
填充权：3rem；
右边框：1px实心#000；
}

←
→
您需要在
.prev
类中添加右边框属性，
右边框
值与
右边框
相同，以使箭头之间的边框居中

保证金权：3rem；
右边框：1px实心#000


.carousel控件{
浮动：对；
宽度：50%；
垫面：1毫米；
右侧填充：1rem；
}
.carousel控件span.next{
背景：url(https://s10.postimg.org/hdeqo479l/snext.png)不重复；
宽度：16px；
高度：10px；
}
.旋转木马控制范围{
显示：内联块；
浮动：左；
}
.carousel控件span.prev{
宽度：16px；
高度：45px；
保证金权利：3rem；
填充权：3rem；
右边框：1px实心#000；
}

←
→
。没有考虑背景位置。不错。非常感谢，太棒了。没有考虑背景位置。不错。谢谢。
.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;
}