javascript - 为光滑的 slider 添加左右边框

Question

我有一个光滑的 slider ，我正在尝试在内容的左侧和右侧添加虚线边框。

这是一个傻瓜:http://plnkr.co/edit/4iejdteLKFUo8ECQLpuh?p=preview

我有两个问题:

1. 右边框未显示
2. 边框和文本之间没有足够的填充

我该如何解决上述问题？

HTML:

<div class="container">
    <div class="grid-wrap">
      <div class="grid-col one-eighth">
        <div class="your-class">
          <div class="text-box">test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 test1</div>
          <div class="text-box">test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2</div>
          <div class="text-box">test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3 test3</div>
          <div class="text-box">test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4 test4</div>
        </div>
      </div>
    </div>
  </div>

CSS:

.text-box {
    border-left: 1px dashed white;
    border-right: 1px dashed white; 
}

边界权问题图片:

Answer 1

我纠正了你的错误。 http://plnkr.co/edit/alurwdlyicnLw3BBN1VQ?p=preview

我只是在 .text-box 类中添加了一个填充

.text-box {
  border-left: 1px dashed white;
  border-right: 1px dashed white;
  padding: 30px;
 }

我还将网格环绕宽度更改为 70% + 6px(所有边框合并)

.grid-wrap {
  width: calc(70% + 6px);
}

像这样，您可以更改填充，并且可以看到所有边框。请记住，如果更改边框宽度，则还必须更改 + xp。