我试图突出显示这种布局的不同选项：active。问题是突出显示不会填满整个内容。这是一张图片以及我的CSS和HTML代码。希望你们能帮助我。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h1 style="padding-left: 30px; padding-top: 35px"><img src="img/perro.png" style="float:left;width:42px;height:42px; padding-right: 10px;">Bibliografía APA</h1>
</head>
<body>
<button onclick="toggle_visibilityone()" style="float: right">[+]
</button>
<a href="html/libro.html" class="hili" type="button">
<div class="tapp">
LIBRO
</div>
</a>
<p id="p1">Un libro debe poseer 25 hojas mínimo (49 páginas), pues
de 24 hojas sería un folleto y de una hasta cuatro páginas se
consideran hojas sueltas (en una o dos hojas). Caen dentro de esta
categoría los e-books y los audiolibros</p>
<hr>
这是我的CSS
*{
-webkit-touch-callout: default;
-webkit-text-size-adjust: none;
-webkit-user-select: text;
-webkit-tap-highlight-color: transparent;
}
body {
width:100%;
height: 100%;
margin: 0%;
padding: 0%;
left: 0%;
top: 0%;
background-color: darkred;
font-size: 18px;
text-align: left;
}
div.tapp:active{
background-color: lightblue;
}
/*Parrafos con descripciones de cada tipo de fuente*/
p{
text-align: center;
background-color: white;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 13px;
display: none;
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein{
0% {opacity: 0;}
100% {opacity: 1;}
}
/*Enlaces del body*/
.hili{
color: white;
text-decoration: none;
}
/*Botones*/
button{
color: black;
margin-right: 10px;
font-size: 10px;
width: 30px;
height: 15px;
outline: none;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
/*Título de Bibliografía APA*/
h1{
position: relative;
background-color: rgb(127, 159, 219);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
color: white;
text-align: left;
font-size: 30px;
margin-top: 0px;
height: 70px;
border-bottom-style: solid;
border-color: black;
border-width: 2px;
}
这就是它现在的样子：Image
可能是一个愚蠢的问题，但我正在努力学习，我读了很多，但我无法解决它。提前致谢。
突出显示并未填充整个内容，因为.tapp类仅包装“LIBRO”文本。
我建议您将:active样式直接应用于css中标签的.hili规则，或者将其他.tapp类添加到<a>标记中。
这将消除完全拥有<div class="tapp">的需要。
所以在你的html中，下面会得到你想要的结果：
<a href="html/libro.html" class="hili tapp" type="button">LIBRO</a>
由于您正在尝试将更多项目组合在一起，因此<hr>标记未被包含在内并且它有一个边距。这个边缘引入了:active亮点和<hr>之间的这个间距。请参阅以下codepen。
https://codepen.io/anon/pen/oVBPdw
我还建议使用<hr>而不是在包含div上使用border-bottom。