0

如何使链接保持在 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>
4

3 回答 3

3
div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue; 
    display:inline-block    
}
a:link {
    color: white;   
}
于 2012-09-16T13:17:26.443 回答
0

将填充添加到您的 div,而不是您的链接。

div {
 padding: 10px;
 background-color: yellow;   
 margin-top: 20px;
}
a {
border: 1px solid black;
background-color: blue;
}
a:link {
 color: white;   
}
于 2012-09-16T13:16:42.860 回答
0

因为您在锚上使用填充,所以需要设置 display:block。

在此处查看我的 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;   
}
于 2012-09-16T13:19:51.030 回答