1

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>

前もって感謝します。

ここに画像の説明を入力

4

4 に答える 4

4

div を相対的に配置し ( position: relative;)、テキストを絶対的に配置します ( position:absolute;)。テキストが div 内の要素内にあることを確認してから、ネストされた要素のtop位置を好みの位置になるまで負の数に設定します。

leftそれを中央に配置するには、プロパティをいじる必要がありrightます。

于 2012-09-01T21:00:35.393 に答える
2

この JSFiddleは、スクリーンショットをほぼ模倣しています。

これを#menuスタイリングに追加する必要がありました：

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

そして、これに#text p：

margin-top: 0;

そして、それはトリックをしました。

すべてを中央に配置するのは、次のように簡単です。

#text {
    width: 500px;
    margin: 0 auto;
}
于 2012-09-01T21:06:13.470 に答える
0

相対/絶対配置を使用するか、このようなことを試すことができます

     <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;
    }
于 2012-09-01T21:04:21.970 に答える
0

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;
}
于 2012-09-01T21:13:14.147 に答える