如何将内容放入具有真实边框的div中

发布于 2024-12-22 17:11:53 字数 887 浏览 1 评论 0原文

我有一个 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;
}

原文

I have a div but i dont know how to set the css position attributes. I would like the div (nav) to be placed in the middle of the page. Then i would like to place content in the div so that the border comes around the content. Currently, the div border doesnt border anything and the content that it should border appears below the 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

琴流音 2024-12-29 17:11:53

由于 .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;
}

示例。

Since .button is set to position:absolute, the container div (.nav) isn't counting their height into its own.

Add a clearing div after the links:

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

This should do the trick.

Also, you don't really need to have your a elements set to position:absolute—here's my solution:

.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.

回复收藏 0 原文

将军与妓 2024-12-29 17:11:53

Purmou 解决方案的替代方案是在 css 中专门设置 #nav 的 div 高度：

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

如小提琴。

An alternative to Purmou's solution is to specifically set the #nav's div height in the css:

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

Like shown in this fiddle.

回复收藏 0 原文

~没有更多了~