为什么我的菜单没有一直向左移动

Question

我是编码新手，如果我在这里做的完全愚蠢，我很抱歉。

我正在使用 html 和 css 构建一个非常基本的网站。我想使用 2 个导航栏。一个位于主导航屏幕的顶部。左侧的一个用于导航特定 page.The 第一个工作正常，但第二个看起来很奇怪。可点击的链接无法再向左移动，因此会突出显示在右侧。这就是我的意思：

我将鼠标悬停在 "content2"

我做错了什么？这是我写的代码：

<body>
    <nav>
        <ul class="navbar">
            <li class="navbar"><a class="navbar active" href="index.html">home</a></li>
            <li class="navbar"><a class="navbar" href="page1.html">page 1</a></li>
            <li class="navbar"><a class="navbar" href="page2.html">page 2</a></li>
            <li class="navbar"><a class="navbar" href="page3.html">page 3</a></li>
            <li class="navbar"><a class="navbar" href="page4.html">page 4</a></li>
        </ul>
    </nav>

    <div id="contentbar">   
        <ul class="ucontentbar">
            <li class="contentbar"><a class="contentbar" href="#">content1</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content2</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content3</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content4</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content5</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content6</a></li>
            <li class="contentbar"><a class="contentbar" href="#">content7</a></li>
        </ul>
    </div>

    <div id="page">
    <p>text</p>

    </div>

</body>

以及随之而来的 CSS：

body {
margin: 0px;
padding: 0px;
}

nav {
background-color: rgb(50,50,50);
font-family: sans-serif;
font-size: 20px;
height: 60px;
width: 100%;

}

ul.navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
text-align: right;
position: fixed;
}

li.navbar{
float: left;
height: 60px;
}

a.navbar { 
display: inline-block;
padding: 19px 25px;
background-color: rgb(50,50,50);
text-align: center;
color: white;
text-decoration: none;
}

a.navbar:hover {
background-color: black;
}

a.active {
background-color: rgb(80,80,220);
}

#contentbar {
background-color: rgb(100,100,100);
font-family: sans-serif;
font-size: 14px;
width: 300px;
height: 100%;
display: block;
position: absolute;
}

ul.contentbar {
margin: 0;
padding: 0;
}

li.contentbar {
list-style: none;

}

a.contentbar { 
left: 0;
background-color: rgb(100,100,100);
color: white;
display: block;
width:300px;
height: 30px;
text-decoration: none;

}   

a.contentbar:hover {
background-color: black;
}

#page { 
background-color: rgb(0,200,100);
width: 100%;
height: 100%;
}

Answer 1

将您的 ul 赋予 padding: 0 或从 a.contentbar 移除 width 样式。

默认情况下，ul 元素具有其子元素的填充原因。这就是为什么你的列表看起来像那样。

Answer 2

您的 ul 类名似乎有错字 <ul class="ucontentbar">，因此未应用填充。

为什么我的菜单没有一直向左移动

Why does my menu not go all the way to the left

html

css

outline