Html 列表项'；s位置低于集装箱部门

我正在尝试制作一个导航栏。我想解决的问题是，正如您在运行snippet时所看到的，实际可见的导航栏的位置略低于其容器分区（#navbar）

我想要的是定位附在“顶部”分区上的导航条，可以通过相对定位来完成，但问这个问题的目的是什么：D 那么，关于如何修复它有什么建议吗

正文
{
高度：800px；
宽度：100%；
背景图片：url（“bg.jpg”）；
背景重复：重复-x；
}
#包裹
{
高度：750px；
宽度：100%；
位置：绝对位置；
}
#主要内容
{
位置：绝对位置；
宽度：75%；
身高：90%；
左：12.5%；
顶部：20px；
边框：凹槽；
/*盒影：#ff3366 10px 10px 5px*/
背景色：白色；
}
#顶
{
位置：绝对位置；
高度：125px；
宽度：100%；
背景色：鬼影白；
}
#头衔
{
字体系列：冷水机，无衬线；
字号：1.8em；
颜色：#f1638b；
宽度：自动；
身高：继承；
左侧填充：20px；
浮动：左；
显示：内联块；
}
#导航栏1
{
位置：绝对位置；
宽度：100%；
顶部：125px；
填充：0px；
列表样式类型：无；
边际：0px；
}
#纳瓦巴利
{
显示：内联；
浮动：左；
}
#导航栏1 a:链接，a:已访问
{
显示：块；
文字装饰：无；
左侧填充：15px；
右侧填充：15px；
垫面：5px；
垫底：5px；
宽度：140px；
背景颜色：橙色；
}

我的网站

如果我正确理解您的问题，我相信此问题是由列表的默认边距/填充引起的。添加“边距：0；”如果我正确理解你的问题，我相信这个问题是由列表的默认边距/填充引起的。添加“边距：0；”到UL应该修复它。

因为您正在浮动列表项，父项将不包含它们，它们将溢出。将UL更改为

下面是

内联列表

类

.inline-list {
  margin: 0;
}

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

工作原理

首先，我们删除浏览器默认为UL元素提供的边距

• .inline列表{
  保证金：0；
  }

然后我们用一个clearfix

• .inline列表：之后{
  内容：“；
  显示：表格；
  明确：两者皆有；
  }

这是新的演示：

关于代码的旁注：

从

#navbar1 li

中删除

显示：内联

，而是添加

列表样式：无像这样：

#导航栏1 li{
列表样式：无；
浮动：左；
}

---

由于您正在浮动列表项，父项将不包含它们，因此它们将溢出。将UL更改为

下面是

内联列表

类

.inline-list {
  margin: 0;
}

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

工作原理

首先，我们删除浏览器默认为UL元素提供的边距

• .inline列表{
  保证金：0；
  }

然后我们用一个clearfix

• .inline列表：之后{
  内容：“；
  显示：表格；
  明确：两者皆有；
  }

这是新的演示：

关于代码的旁注：

从

#navbar1 li

中删除

显示：内联

，而是添加

列表样式：无像这样：

#导航栏1 li{
列表样式：无；
浮动：左；
}

---

另外，可能会添加“padding:0；”以及将条向左对齐。另外，可能添加“padding:0；”以及将该条与左侧对齐。