html - CSS让 slider 重叠边框

Question

我有一个为 WordPress 创建的模板页面，该页面是一个应用了以下 CSS 的 DIV；

.page-width {
     max-width: 1170px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 25px;
     padding-right: 25px;
     border: 1px solid #eee;
     border-top: none;
}

WordPress 内容输出到该 DIV。我正在使用页面构建器在页面顶部创建一个 slider ，但我希望 slider 顶部和水平菜单以及 slider 两侧之间没有间隙，所以我使用了这段代码；

.page-width .widget_sow-slider {
    margin-left: -25px;
    margin-right: -25px;
    margin-top: -25px;
}

这看起来几乎是完美的，只是 slider 的左/右有一个 1px 的边框很明显。有没有办法在那个点移除边框，或者让 slider 在两侧重叠 1px。

更新:

HTML 看起来像这样；

<div class="page-width">

   <div class="widget_wow_slider;">
   .. slider..
   </div>

</div>

Answer 1

在没有看到网站和能够检查代码的情况下，我建议如下:

是否可以将 slider 的宽度增加 2px？

您的 slider 是否位于 .page-width 元素内？如果是这样，您已将 1px 边框应用到该元素，这是这里的罪魁祸首。

尝试将样式调整为以下内容:

.page-width {
 max-width: 1170px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 25px;
 padding-right: 25px;
 border-bottom: 1px solid #eee;