Question

我正在尝试制作导航栏。我想要解决的问题就像你在运行代码片段上看到的那样，实际的可见导航栏位于比容器分区（#navbar）低的位置。

我想要的是将导航栏定位在＆＃34; top＆＃34;分裂，可以通过相对定位来完成，但接下来要问的是什么。：d 那么有关如何修复它的任何建议吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果我正确理解您的问题，我相信这个问题是由列表的默认边距/填充引起的。添加＆＃39;保证金：0;＆＃39; UL应该修复它。

Answer 2

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

这是inline-list类

.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

关于您的代码的附注：

从display:inline移除#navbar1 li，然后添加list-style:none;，如下所示：

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

列出项目的位置低于容器部门

2 个答案:

如何运作