Question

我正在制作导航栏，当我设置导航标签时，导航栏和我下方的画布之间有一个空格...... 这可能是一个显而易见的解决方案，我似乎无法找到它：P here is the page

这是我的CSS

@font-face 
{
    font-family: 'Quicksand-Bold';
    src: url('../Quicksand-Bold.woff') format('woff');
}
#mainBanner 
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 60px;
    left: 100px;
    font-size: 25px;
}

#navbar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: #333;
    width: 1000px;
    position: relative;
}

li {

    display: inline;
    font-family: Arial;
    font-weight: bold;
}

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

li a:hover {
    background-color: #D92715;
}

#welcomeBanner
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 155px;
    left: 180px;
    font-size: 50px;
}

#pi
{
    width: 175px;
    height: 125px;
    position: absolute;
    top: 185px;
    left: 550px;
}

p
{
    font-family: Quicksand-Bold;
    position: absolute;
    top: 300px;
    left: 210px;
}

canvas
{
    display: block;
    margin: 0 auto;
    padding: 0;
}

这是我的HTMl

    <!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Pi Projects</title>
  <meta name="description" content="The place to go for Raspberry Pi Projects".>
  <meta name="author" content="Jordan Baron">

  <link rel="stylesheet" href="css/styles.css">

</head>

<body>  

    <img src=images/pilogo.png id="pilogo">
    <img src=images/pi.png id="pi">

    <h1 id="mainBanner">Projects</h1>


    <nav id="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>

    <h1 id="welcomeBanner">Welcome<br>to PiProjects.tk</h1>
    <p>The best source for Raspberry Pi projects</p>

    <canvas id="myCanvas" width="1000" height="500" style="border:1px solid white;">
    </canvas>


  <script src="js/scripts.js"></script>
</body>
</html>

Answer 1

将导航样式更改为

#navbar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: #333;
    width: 1000px;
    position: relative;
    display: table;
}

HTML Nav标记格式很奇怪

1 个答案: