Question

我有一个div，但我不知道如何设置css位置属性。我想将div（nav）放在页面中间。然后我想在div中放置内容，以便边框围绕内容。目前，div边界没有任何边界，它应该边框的内容出现在div下面。

HTML：

         <div id='nav'>
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a>
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a>
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a>
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a>

CSS：

.button{
 position: absolute;
 top: 50px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px 0px 10px;
}

#nav{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
}

Answer 1

由于.button设置为position:absolute，因此容器div（.nav）不会将其高度计算为自己的高度。

在链接后添加结算div：

<div style="clear:both;"></div>

这应该可以解决问题。

此外，您并不需要将a元素设置为position:absolute - 这是我的解决方案：

.button {
    display:inline-block;
    margin-top: 50px;
    margin-right:80px;
    border: 1px solid orange;
    cursor: pointer;
    padding: 0px 10px;
}

#nav {
    position: relative;
    margin: 0 auto;
    border: 1px solid gray;
}

Example

Answer 2

Purmou解决方案的另一种选择是在css中专门设置#nav的div高度：

#nav
{
     position: relative;
     margin-right: auto;
     margin-left: auto;
     margin-bottom: 10px;
     border: 1px solid gray;
     width: 700px;
     height: 120px;
}

如此fiddle所示。

如何将东西放入具有真实边框的div中

2 个答案: