向滑动滑块添加左右边框

Question

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

这是一个掠夺者：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。