CSS位置的布局問題

Question

嘿伙計們，我正在嘗試創建一個類似於你在starbucks.com上找到的導航系統。 以下是我的示例鏈接： http ： //dl.dropbox.com/u/73992/js_tests/test.htm我正在底部完成導航示例的效果，但正如您所看到的那樣存在定位問題。 您可以在源代碼中找到CSS。 我認為這是測試它的最佳方法。 提前感謝您提供的任何幫助。

按照這里的建議是css

*
{
    margin:0;
    padding:0;
}

#nav
{
    position:relative;
    margin-top:3em;
    margin-left:3em;
}   

#nav ul
{
    list-style-type:none;
}

#nav ul li
{
    position:relative;
    margin-top:10px;
}    

#nav ul li ul li
{
    margin-top:0px;
}

#nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    border-bottom:none;
    z-index:20;
}

.content
{
    position:relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
}

.content form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}   

.gallery
{
    margin:10px 10px 10px 10px;
    background-color:#ffffff;
    border:solid 1px black;
} 

.gallery img
{
    display:inline-block;
    margin:10px 5px 10px 0px;
    float:left;
} 

/*
This next section is identical but represents what happens w/ the absolute positioning.
*/

.content2
{
    position:absolute;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    top:30px;
    z-index:-5;
} 

.content2 form
{
    display:block;
    margin:10px 10px 10px 10px;
} 

.content2 p
{
    text-align:left;
    display:block;
    margin:10px 10px 10px 10px;
}

.clear
{
    clear:both;
}

如果這有助於這是我想要完成的

Answer 1

試一試。 將位置從絕對更改為相對，並刪除30px上邊距。 您應該能夠獲得與您上面的3個示例相同的效果。

.content2
{
    position: relative;
    width:300px;
    background-color:#F7FF88;
    border:solid 5px black;
    z-index:-5;
}

[編輯]

首先，刪除“border-bottom：none;” 所以你的h1仍然會有標簽效果的底部邊框。

#nav ul li h1
{
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:#000000;
    background-color:#F7FF88;
    border:solid 5px black;
    width:100px;
    height:30px;
    z-index:20;
}

給你的h1上課，讓我們說“標簽”

<li><h1 class="tabbed">Ex. 1</h1>

並且可能會為CSS使用一些底片。

h1.tabbed {
    position:absolute;
    top:-28px;   
}

嘗試一下這個。

Answer 2

放置display:inline; 在li

float:left; 在ul

如果我理解你的問題，我認為這是你的大問題。

Answer 3

float：left可以解決您的定位問題。 你必須在你的CSS中只添加兩行

#nav ul li {
    float: left;
    margin: 0 15px;
    position: relative;
}