html - 如何使文本站在 div 之上？

Question

我想在 div 上创建一个菜单，所以基本上文本就在它上面（参见示例）。我想让菜单的文本在同一个 div 中，所以 html 是这样的：

<div id="text">
            <div id="menu">Portfolio &nbsp;|&nbsp; About us</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

提前致谢。

Answer 1

将 div 相对定位 ( position: relative;)，然后将文本绝对定位 ( position:absolute;)。确保文本在 div 内的元素内，然后将嵌套元素的top位置设置为负数，直到它定位到您喜欢的位置。

要将其居中，您将需要处理left和right属性。

Answer 2

这个 JSFiddle只是模仿你的截图。

我不得不将此添加到#menu样式中：

margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;

然后这是#text p：

margin-top: 0;

这就是诀窍。

让它全部居中就像这样简单：

#text {
    width: 500px;
    margin: 0 auto;
}

Answer 3

您可以使用相对/绝对定位或尝试类似的方法

     <div id="text">
          <div id="menu">Portfolio &nbsp;|&nbsp; About us</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

在你的 CSS 中：

    #text{
       text-align:center;
    }
    #menu{
      margin-top:-20px;
    }

Answer 4

见http://jsfiddle.net/rVjCB/

HTML：

<div class="menu">
    <ul class="top">
        <li>Portfolio</li>
        <li>About us</li>
    </ul>
    Text
</div>

CSS：

.menu{
    background:#957F00;
    max-width:500px;
    margin:0 auto;
    color:white;
}
.menu>.top{
    background:white;
    overflow:hidden;
    color:black;
}

.menu>.top>li{
    float:left;
    width:50%;
    border-left:3px solid #957F00;
    margin-left:-3px;
    text-align:center;
}