Html 使标签的整个宽度可点击且响应迅速

所以，我有一个带过滤器的画廊。我需要的过滤器（做为标签）是可点击的，因为这是第一个过滤器“所有”的时刻。问题是，正如您在调整窗口大小时所看到的，标签没有响应。填充在rems中完成，但div.filters本身不包含可点击性所需的标签填充。当调整窗口大小时，标签填充包含在红色边框内，如何实现这一点

*{
保证金：0；
填充：0；
框大小：边框框；
}
：根{
--绿松石：rgb（56184201）；
--白色：rgb（255、255、255）；
--波比瑞德：rgb（199,74,82）；
}
ol,，
李{
列表样式类型：无；
}
/* 5. 过滤器*/
输入[type=“radio”]{
显示：无；
}
.过滤器{
显示器：flex；
证明内容：中心；
保证金：2rem 1rem；
边框：1px纯红；
}
.筛选项{
显示：块；
文本对齐：居中；
边缘底部：.3rem；
颜色：var（--白色）；
}
.筛选项目标签{
文本对齐：居中；
背景：var（--绿松石色）；
光标：指针；
}
.过滤器项目标签：悬停{
背景：var（--poppyred）；
}
[value=“all”]：选中~.grid gallery[数据类别]{
显示：块；
}
[value=“branding”]：选中~.grid gallery。照片：不（[data category~=“branding”]），
[value=“graphical”]：选中。网格库。照片：非（[data category~=“graphical”]），
[value=“interior”]：选中~.grid gallery.照片：不（[data category~=“interior”]），
[value=“插图”]：选中~.grid gallery.照片：非（[data category~=“插图”]），
[value=“arts”]：选中。网格库。照片：非（[data category~=“arts”]）{
显示：无；
}
/*单击即可更改颜色*/
[value=“all”]：选中。过滤器[for=“all”]，
[value=“branding”]：选中。过滤器[for=“branding”]，
[value=“graphical”]：选中。过滤器[for=“graphical”]，
[value=“interior”]：选中。过滤器[for=“interior”]，
[value=“插图”]：选中。过滤器[for=“插图”]，
[value=“arts”]：选中~.过滤器[for=“arts”]{
背景：var（--poppyred）；
}
/* 6. 画廊*/
.grid画廊{
显示：网格；
网格模板列：重复（4，1fr）；
差距：1勒姆；
保证金：1rem；
}
.照片img{
身高：100%；
宽度：100%；
}
/*标签填充*/
.筛选项。筛选项：第n个子项（1）标签{
填充：057.8em；
}

所有
品牌化
图形设计
室内设计
插图
艺术

添加此类

.filter-items {
    width: 100%;
 }

.filter-item label {
    display: block;
    text-align: center;
    background: var(--turquoise);
    cursor: pointer;
  }

换个班

.filter-items {
    width: 100%;
 }

.filter-item label {
    display: block;
    text-align: center;
    background: var(--turquoise);
    cursor: pointer;
  }

---

你有一个奇怪的填充使“全部”变宽。我会删除它并使用

display:block。在下面的示例中，我做了一些其他更改，删除了
，因为您不需要它。将边距和边框移动到
本身


*{
保证金：0；
填充：0；
框大小：边框框；
}
：根{
--绿松石：rgb（56184201）；
--白色：rgb（255、255、255）；
--波比瑞德：rgb（199,74,82）；
}
ol,，
李{
列表样式类型：无；
}
/* 5. 过滤器*/
输入[type=“radio”]{
显示：无；
}
.筛选项目{
保证金：2rem 1rem；
边框：1px纯红；
}
.筛选项{
文本对齐：居中；
边缘底部：.3rem；
颜色：var（--白色）；
}
.筛选项：最后一个子项{
页边距底部：0；
}
.筛选项目标签{
显示：块；
文本对齐：居中；
背景：var（--绿松石色）；
光标：指针；
}
.过滤器项目标签：悬停{
背景：var（--poppyred）；
}
[value=“all”]：选中~.grid gallery[数据类别]{
显示：块；
}
[value=“branding”]：选中~.grid gallery。照片：不（[data category~=“branding”]），
[value=“graphical”]：选中。网格库。照片：非（[data category~=“graphical”]），
[value=“interior”]：选中~.grid gallery.照片：不（[data category~=“interior”]），
[value=“插图”]：选中~.grid gallery.照片：非（[data category~=“插图”]），
[value=“arts”]：选中。网格库。照片：非（[data category~=“arts”]）{
显示：无；
}
/*单击即可更改颜色*/
[value=“all”]：选中。筛选项[for=“all”]，
[value=“branding”]：选中。筛选项[for=“branding”]，
[value=“graphical”]：选中。筛选项[for=“graphical”]，
[value=“interior”]：选中。筛选项[for=“interior”]，
[value=“插图”]：选中。筛选项[for=“插图”]，
[value=“arts”]：选中~。筛选项目[for=“arts”]{
背景：var（--poppyred）；
}
/* 6. 画廊*/
.grid画廊{
显示：网格；
网格模板列：重复（4，1fr）；
差距：1勒姆；
保证金：1rem；
}
.照片img{
身高：100%；
宽度：100%；
}
/*标签填充
.筛选项。筛选项：第n个子项（1）标签{
填充：057.8em；
}
*/

所有
品牌化
图形设计
室内设计
插图
艺术
Hvala，Dejane！就这样。我知道我错过了什么。因为你是第一个接受你的答案。干杯