如何使链接保持在div元素内部,而不是在其上方和下方扩展?看起来它与未考虑的填充有关,div 认为链接与文本一样高。
有没有办法解决它?
小提琴
法典:
div {
background-color: yellow;
margin-top: 20px;
}
a {
padding: 10px;
border: 1px solid black;
background-color: blue;
}
a:link {
color: white;
}
<div><a href="#">Link button</a></div>
div {
background-color: yellow;
margin-top: 20px;
}
a {
padding: 10px;
border: 1px solid black;
background-color: blue;
display:inline-block
}
a:link {
color: white;
}
将填充添加到您的div,而不是您的链接。
div {
padding: 10px;
background-color: yellow;
margin-top: 20px;
}
a {
border: 1px solid black;
background-color: blue;
}
a:link {
color: white;
}
因为您在锚点上使用填充,所以它需要设置显示:块。
请在这里看我的jsfiddle。
div {
background-color: yellow;
margin-top: 20px;
}
a {
padding: 10px;
display:block; //Added this
border: 1px solid black;
background-color: blue;
}
a:link {
color: white;
}