Question

我想在我的HTML文档中添加一个导航栏。我创建了一个带有无序List和List-Items的Div。列表应该居中，列表项应该并排。

正如您在附带的屏幕截图中看到的那样，除了导航栏上方不需要的空白外，它看起来与我想要的完全相同。

当我删除“navbar-links li”的CSS-Properties时它会消失，但前提是我删除了属性。

    .navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

<html>
<body>
<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>
</body>
<html>

它看起来像什么：

如何删除空白？

Answer 1

＆＃13;

body{margin:0;}
ul{margin:0;}

.navbar {
    background-color: rgb(50, 50, 50);
    min-height: 70px;
}

.navbar-links {
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.navbar-links li {
    list-style-type: none;
    float: left;
    margin-left: 50px;
    margin-top: 22px;
}

＆＃13;

<nav class="navbar">
    <div class="container">
        <ul class="navbar-links">
            <li>HOME</li>
            <li>SERVICES</li>
            <li>OUR WORK</li>
            <li>ABOUT US</li>
            <li>CONTACT</li>
            <li>BOOK ONLINE</li>
        </ul>
    </div>
</nav>

＆＃13;

页面开头和第一个div之间的不需要的空间

1 个答案: