光滑的滑台表格单元格负边距

Question

这是一个小众问题，但是这里....

我正在使用光滑的滑块，并已将嵌套的垂直轮播与滑块同步组合在一起，效果很好。 我只有1个CSS问题，我无法解决。

我的垂直滑块控件在左侧，内容在右侧。 我在垂直控件和内容上使用了display:table-cell，因此它们可以并排显示。到目前为止一切正常！

我想在控件的右边添加一个三角形，这意味着我需要在内容区域添加一个负的左边距。 这就是我遇到的问题。...似乎display: table-cell忽略了左边距。

下面是我的图像-请注意控件边缘和内容边框之间的间隙。这就是我要关闭的

下面的图片是我想要的-控件和内容边框之间没有空隙

这是我创建的小提琴https://jsfiddle.net/damiantaylor/njds51yh/220/

是否可以解决此问题？

编辑，我尝试将display:table-cell更改为display:inline-block，但是当我这样做时，Slick似乎错误地计算了内容容器的宽度

Answer 1

我设法解决了这个问题，但这是将边界拼凑在一起的一种骇人听闻的方法。

如果有一个答案，我还是会更好的答案！

我却像这样把边界放在一起……

.vertical-nav-wrapper:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 13px;
    box-sizing: border-box;
    height: 100%;
    border-top: 1px solid #fe0115;
    border-bottom: 1px solid #fe0115;
    border-left: none;
    clear: both;
    border-right: none;
}

.vertical-nav-wrapper:after {
    content: '';
    position: absolute;
    right: 13px;
    top: 0;
    width: 1;
    height: 100%;
    border-top: none;
    border-bottom: none;
    border-left: none;
    clear: both;
    border-right: 1px solid #fe0115;
}

新小提琴在这里https://jsfiddle.net/damiantaylor/njds51yh/263/

编辑，如果还有另一个滑块/轮播可以处理比Slick更好的效果，我也将其作为答案！