在下面的例子中；td"；条将填充整个窗口宽度，但我无法获得到的封装链接。我希望整个条是一个活动链接，而不仅仅是文本：
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px
}
-->
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">test</a></td>
</tr>
</table>
</body>
</html>不幸的是，我无法更改HTML元素的顺序。这只能通过CSS/Javascript来解决。
只需在CSS:中将display: flex;添加到a
<html>
<head>
<style type="text/css">
<!--
table, tr, td {width: 100%;background: gray;}
a {width:100%;
text-align:left;
color:white;
background-color:black;
font-size: 24px;
display: flex;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">test</a></td>
</tr>
</table>
</body>
</html>添加display:block就可以了。
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px;
display:block
}
-->
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">test</a></td>
</tr>
</table>
</body>
</html>