html - 内的 anchor 脱离 并应用了填充

Question

这是我的html文件

<div>
<p>My text content is here......</p>
<p><a href="#">lINK1</a><a href="#">lINK2</a></p>
</div>

这是CSS

div {
    width:960px;
    border:1px solid;
    margin:0 auto;
}
a {
    padding:10px 10px 50px 10px;
    margin-right:20px;
    border:1px solid red;
}

现在发生的事情是，由于将我的 anchor 的顶部和底部填充到总共 60 像素，它们实际上漂浮在我的主要父分区之外。而且我的 div 不能有固定的高度，因为我的内容的长度不是固定的。谁能建议我如何决定要包含在其中的 div 的宽度？？

Answer 1

你想让 anchor 像这样显示为 inline-block。

http://jsfiddle.net/J7FTX/

div {
    width:960px;
    border:1px solid;
    margin:0 auto;
}
a {
    padding:10px 10px 50px 10px;
    margin-right:20px;
    border:1px solid red;
    display: inline-block;
}