Html ul元素出现在导航栏中

我尝试创建一个粘性导航条，因此我为主导航div指定了

位置：fixed

，并将

位置：relative

添加到其子元素

ul li

。为什么我给

relative

意味着我想在左边留一些空间，所以我给了

位置：relative

和

左：20%

我有一些空间，但元素正在从导航框中流出

HTML

 <nav id="navigation">
    <ul>
        <li><a href="#">one</a>

        </li>
        <li><a href="#">two</a>

        </li>
        <li><a href="#">three</a>

        </li>
        <li><a href="#">four</a>

        </li>
    </ul>
</nav>

我认为它的问题在于

位置：relative

。有人能解释一下发生了什么事，能做些什么吗

---

您使用的

高度：60px#navigation

上的code>和

行高

，防止

高度

超过

60px

，并且

行高

会使菜单的

高度

膨胀，即使您将取消

高度

属性，此外，您还需要

清除
您的
float


现在，我添加了
overflow:hidden在
ul
元素上，但最好使用自清除
类
清除

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

在
ul
元素上使用这个
类
，您就可以摆脱
溢出：隐藏


正如您所评论的，您没有规范化CSS，您需要重置
ul
元素的
margin
，因此使用
margin:0在
ul
上

此外，始终使用或仅使用重置浏览器默认CSS

* {
   margin: 0;
   padding: 0;
}

或者
看，在你的小提琴
行高：60px导致
li
从顶部有一个边距…它与
位置：相对

为了抵消这种影响，我建议您使用
边距顶部：-20px，同样，正如外星人先生所说，也要清除你的浮动


编辑

如果删除
height
并将
行高
与
a
标记对齐，将解决所有问题：


只需删除线高度：60px

ul li {
    float: left;
     position: relative;
    width:20%;
    left: 20%;
    font-size: 20px;
    text-align: center;
    border-width: 0 2px 0 0;
    border-color:white;
    border-style: solid;

}

这是你的答案：

ul{
    position: relative;
    list-style: none;
    margin:0 auto;
    padding:0;
 }

这是需要固定的保证金
 谢谢。我原以为在
#导航中输入60px和
行高：在
li
中输入60px将使
li
完全适合导航栏，没有任何边距（顶部和底部的空格）。现在只有我才知道高度在这里是一个原因。@sun You welcome:）并且不指定
高度，保持自动，如果您想更改+1，请使用
padding
填充项。如果可以删除空格，它应该完全适合导航，边框与导航的末尾接触，就像@Noob一样。@sun这只不过是浏览器的默认边距和填充，所以要规范CSS，否则请使用
margin:0在
ul
element上，因为@NoobEditor说这里的问题是线条高度。但在演示中，它仍然存在，并且运行良好。如有任何建议，请向KS+1咨询。我看到底部有点黑。我们应该给利润率上限：2px；你不应该使用
margintop:-20px
@sun：正如编辑中所提到的……给
a
标记
行高
，它们总是实现间距的更好方法，而且，如果没有
高度
，它也会做得很好，
行高
将需要完全替换
高度（*因为它们都有60px值*）！！哈哈，如果你没有提出负利润率的解决方案，我肯定会投更高的票，这是一种业余的方式……：）我经常在你正确的地方给你的答案投票。享受你的+10代表：）但请确保下次你首先有令人惊讶的解决方案：）
ul li {
    float: left;
     position: relative;
    width:20%;
    left: 20%;
    font-size: 20px;
    text-align: center;
    border-width: 0 2px 0 0;
    border-color:white;
    border-style: solid;

}

ul{
    position: relative;
    list-style: none;
    margin:0 auto;
    padding:0;
 }