Html<；a>；标签延伸到整个页面宽度

我刚刚做了一个漂亮的小按钮

包装在一个链接标签

/*
.档案链接{
宽度：120px；/*与按钮宽度相同*//*
显示：块；
}
*/
.存档按钮{
位置：相对位置；
左边距：自动；
右边距：自动；
宽度：120px；
高度：40px；
过渡：所有200ms的缓进缓出；
}
.存档按钮：：之后{
内容：“；
显示：内联块；
宽度：15px；
身高：100%；
背景色：#ae3535；
/*堆叠上下文*/
位置：绝对位置；
z指数：-1；
/*过渡*/
过渡：宽度250ms；
}
.archive按钮：悬停：：之后{
宽度：100%；
}
.关闭存档按钮{
背景图像：url（'https://image.freepik.com/free-icon/arrow-down-angle_318-52905.jpg');
背景尺寸：自动100%；
背景位置：中心；
背景重复：无重复；
}
.存档按钮打开{
背景图像：url（'https://image.freepik.com/free-icon/ascendant-chevron-arrow-up_318-28667.jpg');
背景尺寸：自动100%；
背景位置：中心；
背景重复：无重复；
}
.存档按钮：悬停{
背景位置：中心；
}




标签是内联元素，
标签是块级元素

块级图元扩展到其父图元的宽度。在这种情况下，是
迫使您的
为全宽。您可以使用
显示：内联块修改下面的
.archive按钮
类以减轻您看到的全宽行为

从[MDN][1]：

块级与内联
块级元素和内联元素之间有几个关键区别：

格式化
默认情况下，块级元素从新行开始，但内联元素可以从行中的任何位置开始

内容模型
通常，块级元素可以包含内联元素和其他块级元素。这种结构区别固有的思想是，块元素比内联元素创建“更大”的结构

编辑：或者，您也可以去掉内部的
元素，直接将
.archive按钮
应用于
标记。那么你就可以避免所有关于
标签中
非法性的评论。
@darham那么我该如何将div变成一个可点击的链接呢？超级简单的选择，就是给链接赋予
div
类，并修复任何轻微的csschanges@JohanSundman在锚定标签内放置任何东西都没有错，请忽略那些说有的人。如果您不确定，您可以在这里检查自己：谢谢！制作