列表项的位置低于容器分区

Question

我正在尝试制作一个导航栏。我要解决的问题是，正如您将在运行片段中看到的那样，实际可见的导航栏的位置略低于其容器部分 (#navbar)。

我想要的是定位附加到"top"分区的导航栏，它可以通过相对定位来完成，但那有什么意义。 :D 那么关于如何修复它有什么建议吗？

body
{
    height:800px;
    width:100%;
    background-image:url("bg.jpg");
    background-repeat:repeat-x;
    
    
}

#wrap
{
    height:750px;
    width:100%;
    position:absolute;
}

#main_content
{
    position:absolute;
    width:75%;
    height:90%;
    left:12.5%;
    top:20px;
    border:groove;
    /*box-shadow:#ff3366 10px 10px 5px;*/
    background-color:white;
}

#top
{
    position:absolute;
    height:125px;
    width:100%;
    background-color:ghostwhite;
}

#title
{
    font-family:Chiller,sans-serif;
    font-size:1.8em;
    color:#f1638b;
    width:auto;
    height:inherit;
    padding-left:20px;
    float:left;
    display:inline-block;
}

#navbar1
{
    position:absolute;
    width:100%;
    top:125px;
    padding:0px;
    list-style-type:none;
    margin:0px;
}


#navbar1 li
{
   
   display:inline;
   float:left;
   
}

#navbar1 a:link,a:visited
{
    display:block;
    text-decoration:none;
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    padding-bottom:5px;
    width:140px;
    background-color:orange;
}

<body>
    <div id="wrap">
        <div id="main_content">
            <div id="top">
                <div id="title"><h1>My Website</h1></div>
            </div>
            <div id="navbar1">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>
            </div>
  
        </div>

    </div>
</body>

Answer 1

如果我没有理解你的问题，我相信这个问题是由列表的默认 margins/paddings 引起的。将 'margin:0;' 添加到 UL 应该可以解决它。

Answer 2

因为您浮动的是父项不包含的列表项，它们会溢出。将 UL 更改为 <ul class="inline-list">

这里是inline-listclass

.inline-list {
  margin: 0;
}

.inline-list:after {
  content: "";
  display: table;
  clear: both;
}

工作原理

首先我们去掉浏览器默认给 UL 元素的边距
- .inline-list { margin: 0; }
然后我们用 clearfix 包含浮点数
- .inline-list:after { content: ""; display: table; clear: both; }

这是新演示：http://jsbin.com/buwexe/edit?html,css,output

关于您的代码的附注：

从 #navbar1 li 中删除 display:inline 并改为添加 list-style:none;，如下所示：

#navbar1 li { list-style: none; float:left; }

列表项的位置低于容器分区

List item's position lower than container division

html

css

navigationbar

工作原理