Html 基础5：更改标签和标签后面的容器颜色；选项卡内容面板 我正在构建一个使用基础5作为框架的Web应用程序。我有一个包含评论和更新部分的页面，通过选项卡导航，并包含在面板中

我成功地在包含更新和评论的选项卡内容面板中添加了一个框阴影，但现在两边都有空白，与页面其余部分的样式不一致

我也使用了inspect元素来查看页边距属于哪个元素，它们本身就是内容面板的一部分。我该如何改变背景，使页边距与页面的其余部分混合，并且选项卡和内容是带方框阴影的白色

选项卡和附带面板的html如下所示：

<div id ="tabs">
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" ><a href="#panel2-1"       role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Updates</a></li>
<li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Comments</a></li>
</ul>
</div>

<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active"  id="panel2-1">     

我尝试在选项卡和内容面板周围添加一个div，这样我就可以更改背景颜色，但没有效果

有人知道我会怎么做吗

谢谢

---

Matti

您是否尝试使用这些Sass变量覆盖默认样式

$include-html-tabs-classes: $include-html-classes;

$tabs-navigation-padding: rem-calc(16);
$tabs-navigation-bg-color: $silver;
$tabs-navigation-active-bg-color: $white;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
$tabs-navigation-font-color: $jet;
$tabs-navigation-active-font-color: $tabs-navigation-font-color;
$tabs-navigation-font-size: rem-calc(16);
$tabs-navigation-font-family: $body-font-family;

$tabs-content-margin-bottom: rem-calc(24);
$tabs-content-padding: $column-gutter/2;

$tabs-vertical-navigation-margin-bottom: 1.25rem;

$include-html-tabs-classes: $include-html-classes;

$tabs-navigation-padding: rem-calc(16);
$tabs-navigation-bg-color: $silver;
$tabs-navigation-active-bg-color: $white;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
$tabs-navigation-font-color: $jet;
$tabs-navigation-active-font-color: $tabs-navigation-font-color;
$tabs-navigation-font-size: rem-calc(16);
$tabs-navigation-font-family: $body-font-family;

$tabs-content-margin-bottom: rem-calc(24);
$tabs-content-padding: $column-gutter/2;

$tabs-vertical-navigation-margin-bottom: 1.25rem;