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;
}

现在发生的事情是，由于我的锚点的顶部和底部填充到总共60px，它们实际上浮出了我的主要父级。我的div不能有固定的高度，因为我的内容长度不固定。任何人都可以建议我如何决定将div的宽度包含在其中？

Answer 1

您希望锚点显示为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;
}

Answer 2

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

这应该可以解决您的问题：）

Answer 3

将display: inline-block添加到锚标记的CSS属性中，它应该开始工作。

在这里演示http://jsfiddle.net/sgaurav/2aeBn/

使用填充</div>，<p>中的<p> <div>内的锚点

3 个答案: