文本不会继续 header

Question

header 上的 href 按钮打不开，我不知道为什么，请帮我解决这个问题。我试过 margin-top，但最小值是 -14px，这还不够。我不知道要使用什么其他代码。我是 css 的初学者，还在学习中。

我希望按钮在 header 的中间高度，忘记说了，抱歉。

styles.css

    body { 
    margin: 0; 
    padding: 0; 
} 

header div, main { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 1em 0 1em;   
} 

header { 
    background: #d000c2; 
    width: 100%; 
    height: 40px;
    position: absolute; 
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
}

header h1 { 
    float: left;
    margin-top: 0px;
} 

main { 
    padding: 21; 
} 

header a { 
    margin-top: -14px;
    text-decoration: none; 
    color: white; 
} 

header li {
    text-transform: uppercase;
    display: inline; 
    margin-right: -14 px;
    margin-top: 0 px;
    font-family: Helvetica;
    font-size: 24px;
    z-index: 11;
}

header a:hover {
    border-top: 3px cyan;
    border-style: solid;
    border-bottom: 0px white;
    border-right: 0px white;
    border-left: 0px white;
 }

header li a:hover { 
    color: cyan;
} 

header ul { 
    float: right; 
    list-style-type: none; 
    padding-top: 1em; 
} 

#vid{
            position:fixed;
            right:0;
            bottom:0;
            min-width:100%;
            min-height:100%;
            background-size:cover;
            z-index: -1;
            }

@media only screen and (max-width: 520px) { 
    header { 
        text-align: center;
        position: relative; 
    } 
    main { 
        padding: 14 px; 
        } 
    header h1 { 
        float: none; 
        margin: 0; 
    } 
    header ul { 
        float: none; 
        margin: 0;
    } 
}

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="./css/styles.css" rel="stylesheet">
</head>
<body>

    <header>
        <div>
            <h1><img src=""></h1>
            <ul>
                <li><a href="#">home</a></li>
                <li>  </li>
                <li><a href="">log-in</a></li>
                <li>  </li>
                <li><a href="">contact</a></li>
                <li>  </li>
                <li><a href="">test</a></li>
            </ul>
        </div>
    </header>
    <main>
        <video autoplay loop id="vid">
            <source src="./videos/background.mp4" type="video/webm">
        </video>        
    </main> 
</body>

Answer 1

见fiddle

<li> 标签不会出现在 header 上的原因是 1em padding-top 申请了 header ul.

因此，header ul 的新 CSS 会像这样

header ul { 
    float: right; 
    list-style-type: none; 
    /* padding-top: 1em; */ 
}

更新

要在 header 内垂直放置链接，您可以使用 flexbox。

请参阅使用

的fiddle

文本不会继续 header

Text wont go on the header

html

css

header

href

button

见fiddle