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