Question

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

.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。我正在使用页面构建器在页面顶部创建一个滑块，但我希望滑块顶部与水平菜单和滑块两侧之间没有间隙，因此我使用了此代码; < / p>

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

这看起来几乎完美，除了滑块左/右边有1px边框，这是明显的。有没有办法在那一点删除边框或让滑块与任何一侧的1px重叠。

更新：

HTML看起来像这样;

<div class="page-width">

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

</div>

Answer 1

如果没有看到网站并且能够检查代码，我会建议如下：

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

你的滑块是否位于.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;

}

CSS让滑块重叠边框

1 个答案: