如何让文字显示在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>

感谢您的提前帮助。

- Thakkennes

---

你可以将这段文本放在某个块级元素（例如 <p>）中，并给该元素一个负的上边距： - Slavenko Miljic

Answer 1

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

要居中文本，您需要调整 left 和 right 属性。

- LMS

---

在这里使用绝对值是不必要的。 - AturSams

不会影响任何东西，但它会从 div 内部被移除，所以应该不会造成任何问题（尽管可能性很小）。 - LMS

Answer 2

这个JSFiddle差不多就是在模仿您的截图。

我必须将这个内容添加到#menu样式中：

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

然后将这个应用到#text p：

margin-top: 0;

这就搞定了。

让所有内容居中只需要这样做：

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

- Roddy of the Frozen Peas

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

- Slavenko Miljic

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

- Oriol