向滑动滑块添加左右边框

Question

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

这里有一个plunker：http://plnkr.co/edit/4iejdteLKFUo8ECQLpuh?p=preview

我有2个问题：

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盒类

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

我也改变网格缠绕宽度70％+ 6像素（所有边框组合）

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

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