背景颜色不覆盖整个 div答案

【问题标题】：Background color not covering the whole div背景颜色不覆盖整个 div
【发布时间】：2022-01-26 08:22:08
【问题描述】：

我有这个scss 类：

.dropdown-list {
  display: block;
  position: absolute;
  background-color: white;
  background-size: 100%;
  list-style: none;
  border: 1px solid var(--color-grey-light-2);
  border-radius: 5px;
  overflow: hidden;

  li {
    padding: 1rem;
    &:not(:last-child) {
      border-bottom: 1px solid var(--color-grey-light-2);
    }

    &:hover {
      background-color: var(--color-grey-light-2);
    }
  }

  a {
    text-decoration: none;
    color: currentColor;
  }
}

但是，背景色并没有覆盖整个div：

如您所见，我的div 的顶部和左侧有一个小边框。

为了完整起见，我添加了html：

<ul class="dropdown-list" style="margin-top: 0.6rem; cursor: pointer">
    <li>
      <a href="#">Add Ingrediets to Shopping List</a>
    </li>
[...]

【问题讨论】：

哪个浏览器？
谷歌浏览器 96.0.4664.110
请告诉我们minimal reproducible example

标签： html css sass

【解决方案1】：

在内联css中赋予背景颜色

<div style="background-color: red;"></div>

这样就可以了

【讨论】：

【解决方案2】：

“下拉列表”类链接在“ul”标签上，而不是“div”标签上。您必须根据需要为“div”标签添加一些 css 或移动类“下拉列表”。如果它不能解决您的问题，您应该使用“div”标签共享该部分。

【讨论】：