Question

我遇到一些CSS / HTML的小问题。我不确定它是什么。我认为我是傻瓜，但我不确定......

问题是这条白线：

CSS

    body{
    width: 100%;
    color: white;
    margin: 0 0;
}

.main-header nav{
    height: 40px;
    width: 100%;
    background-image:url('img/menu-bg.png');
    padding: 15px 0px;
}

.main-header .logo{
    float: left;
    vertical-align: middle;
    line-height: 12.5px;
}

.main-header .logo a:hover{
    color:white;
    text-decoration:none;
    font-size: 150%
}

.main-header ul{
    float: right;
    list-style: none;
    vertical-align: middle;
    line-height: 12.5px;
}
.main-header ul li{
    display: inline;
    padding: 5px 5px;
}

.main-header nav a{
    color:white;
    text-decoration:none;
    font-size: 150%
}

.main-header nav a:hover{
    text-decoration:underline;
    color: #FFBB00;
}

.main-header .nav-line{
    width: 100%;
    padding: 3px 0px;
    background-color: #FFBB00;
    color: #fff;
    overflow: hidden;
}

HTML

    <!DOCTYPE HTML>
<html>
    <head>
        <title>Project 2</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <header class="main-header">
            <nav>
                <div class="logo">
                    <h2><a href="#">Project 2</a></h2>
                </div>
                <ul>
                    <li><a class="active" href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Team</a></li>
                </ul>
            </nav>
            <div class="nav-line"></div>
        </header>
    </body>
</html>

Answer 1

Logo正在推动这条线。它的行高太高而无法放入父级，因此，设置.main-header .logo {line-height: 11px;}可以解决它。

请注意，这不是唯一的解决方案，而是指出差距来源的解决方案。您也可以通过在父级上设置高度并隐藏溢出来解决此问题。

Answer 2

从.nav-line div中删除overflow:hidden会修复它。

<强> jsFiddle example

或者将overflow:auto;添加到导航栏中：

.main-header nav {
    height: 40px;
    width: 100%;
    background:#000;
    padding: 15px 0px;
    overflow:auto;
}

<强> jsFiddle example

无论哪种方式，您的顶级容器内容都会将其下方的内容推下约一个像素。

Answer 3

我认为你的问题是img / menu-bg.png有一行白色像素或60％黑色。为什么你不使用背景：＃000; ？

白色差距CSS / HTML

3 个答案: