如何消除边框内小部件周围的填充?
P粉187160883
P粉187160883 2023-09-07 12:54:25
0
1
626

第一张图片是我所拥有的,第二张图片是我想要完成的结果。

到目前为止,我意识到禁用两个刻度(上图中)可以解决问题,但是如何编写 css 代码?

这是我当前用来根据自己的喜好调整小部件的代码。

span[data-pin-log="pinterest"] {
    overflow: scroll;
    overflow-x: hidden;
}
span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
span[data-pin-log="embed_grid"]::-webkit-scrollbar-thumb {
    background: #FF0000;
}

#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_button] {
  display: none !important;
}
#pinterest [class$=_hd] {
display: none !important;
}
body > span[data-pin-log="embed_grid"] {
  border: none;
}
<a data-pin-do="embedBoard" data-pin-board-width="350" data-pin-scale-height="500" data-pin-scale-width="130" href="https://www.pinterest.co.uk/toastedmacarons/rich-boys-city-girls/"></a>
<script async defer src="https://assets.pinterest.com/js/pinit.js"></script>

如果有帮助的话,这个小部件就在这里。

我对 CSS 的了解非常有限,因此非常感谢您的帮助。预先感谢您:))

P粉187160883
P粉187160883

全部回复(1)
P粉665427988

按照我的CSS代码:

/* Remove scrollbar */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
    overflow: scroll;
    overflow-x: hidden;
}
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
}

/* Remove border */
body > span[data-pin-log="embed_grid"] {
  border: none;
  padding: 0 !important;
}

/* Remove padding */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"] {
  padding: 0;
}

/* Hide header (pinterest logo) */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_grid"]:first-child {
  display: none;
}

/* Hide follow button */
body > span[data-pin-log="embed_grid"] > span[data-pin-log="embed_user_ft"]:last-child {
  display: none;
}

Codepen 上的完整示例

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板