时间戳

首页 > 解决方案 > 我的 html 网站顶部有一条灰线

html - 我的 html 网站顶部有一条灰线

问题描述

我是所有这些 html 网站建设和快餐网站工作的新手。我想在我的网站顶部制作一个“主页”“菜单”和“联系人”列表，但我似乎无法修复边距/填充

我的网站图片

<!DOCTYPE html>
<head>
    <title>McBuggaKing</title>
    <style>
        body {
            background: grey;
            color: yellow;
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            margin: 0;
            padding: 0;
            background: green;
        }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
            margin: 0 20 0 0;
        }

        section {
            margin: 0;
            padding: 0;
        }

        Footer {
            Color: White
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home </a></li>
                <li><a href="meny.html">Menu </a></li>
            </ul>
        </nav>
    </header>
    <section>
       <h1>Welcome to McBuggaKing.</h1> 
       <h4>We got all the buggas u need</h4>
    </section>
        <section> 
        <div> Chessbugga </div>
        <div> Fryz </div>
        <div> Popping Soda </div>
        </section>
        <footer>Copyright Floffy</footer>
</body>
</html>

这是我在互联网上搜索的非常简单的网站，但似乎找不到问题。

标签： htmlcssnew-operator

解决方案

只需添加margin: 0;到 ul 元素。

<head>
    <title>McBuggaKing</title>
    <style>
        body {
            background: grey;
            color: yellow;
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            margin: 0;
            padding: 0;
            background: green;
        }

        ul {
            list-style-type: none;
            margin: 0;
        }

        li {
            display: inline-block;
            margin: 0 0 0 0;
        }

        section {
            margin: 0;
            padding: 0;
        }

        Footer {
            Color: White
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home </a></li>
                <li><a href="meny.html">Menu </a></li>
            </ul>
        </nav>
    </header>
    <section>
       <h1>Welcome to McBuggaKing.</h1> 
       <h4>We got all the buggas u need</h4>
    </section>
        <section> 
        <div> Chessbugga </div>
        <div> Fryz </div>
        <div> Popping Soda </div>
        </section>
        <footer>Copyright Floffy</footer>
</body>
</html>

推荐阅读