导航栏上方的 HTML 和 CSS 空白

Question

我对 HTML 和 CSS 还是个新手。我遇到了一个我不知道如何解决的问题。

导航栏上方有一个白色间隙。有没有可能我可以这样做，所以它附在顶部。

HTML

<div class="navbar">
    <ul style="float:right;list-style-type:none;">
        <li><a href="mailto:enquiry@efc.ac.uk">CONTACT US</a></li>
        <li><a href="#">JOBS</a></li>
        <li><a href="#">NEWS AND EVENTS</a></li>
        <li><a href="#">BUISNESS</a></li>
        <li><a href="#">COURSES</a></li>
        <li><a href="#">ABOUT EPPING FOREST COLLEGE</a></li>
        <li><a href="#">HOME</a></li>
     </ul>
</div>

CSS

.navbar {
    margin-top: 0px;
}
.navbar ul {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    list-style-type: none;
    background-color: #333;
}

.navbar li {
    float: right;
    font-weight: 700;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    background-color: #e74c3c;
}

Answer 1

试试这个 css，因为 ul 的浏览器默认边距。

.navbar ul {
  margin: 0 auto;
}