Html CSS：将宽度设置为父项的宽度

我使用的是

角度

mat sidenav

。在左边我有一个导航，在右边是一个简单的组件

我们看到

导航

的地方应该有一个单独的

背景色

，就像这里快速绘制的图像一样。所以要100%清楚：我需要

div

和class

nav title容器

来填充父级宽度

然而，当我尝试这样做时，只有文本周围的几个像素是彩色的。可能是因为我做错了。我对css也不是很熟悉（已经有好几年了）。我脑子里看到的是什么简单的东西？我认为解决办法很简单，但我自己找不到

HTML

---

您可能希望在css中执行以下操作：

mat-sidenav {
  background-color: lightcoral;
}

.nav-title {
  margin: 0;
  padding: 1.33em 5em;
  cursor: pointer;
}

.nav-title--highlighted {
  background-color: goldenrod;
  border-bottom: 0.2em solid wheat;
}

在您的html中：

    <mat-sidenav ...>
        <h4 class="nav-title nav-title--highlighted">Navigation</h4>
        <h4 class="nav-title">Statistics</h4>
    </mat-sidenav>

航行
统计

h4

的上下页边距为1.33，除非使用

页边距：0进行重置。此数字显示在填充中，允许您为标题的背景着色。一般来说，您希望在要着色的元素上添加填充，大多数情况下，它是最里面的组件（在本例中是
h4
）。我添加了一个光标，您可能希望稍后可以单击整个标记

这些容器是不需要的

请说明您想要什么。简单解释一下sirI建议您研究CSS FlexBox的问题您可能无法获得全宽，因为
左侧填充
和
右侧填充
位于
mat sidenav
上。如果需要，最好在子元素上移动该填充。另一种方法是添加与
.nav title container
上的填充相同的负边距，例如，
左边距：-5em。您可能想将
.nav title container
width
设置为100%，而不是
max content
。谢谢，（其中一个）问题确实是我实施的填充
mat-sidenav {
  background-color: lightcoral;
}

.nav-title {
  margin: 0;
  padding: 1.33em 5em;
  cursor: pointer;
}

.nav-title--highlighted {
  background-color: goldenrod;
  border-bottom: 0.2em solid wheat;
}

    <mat-sidenav ...>
        <h4 class="nav-title nav-title--highlighted">Navigation</h4>
        <h4 class="nav-title">Statistics</h4>
    </mat-sidenav>