文本不会出现在标题上答案

【问题标题】：Text wont go on the header文本不会出现在标题上
【发布时间】：2015-11-25 18:54:05
【问题描述】：

href按钮不会出现在标题上，我不知道为什么，请帮我解决这个问题。我已经尝试过使用margin-top，但最小值是-14px，这还不够。我不知道要使用什么其他代码。我是 CSS 初学者，还在学习中。

我希望按钮位于标题的中间高度，对不起。

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>

【问题讨论】：

因为你在header中设置了一个height
那是因为你有一个padding-top: 1em; 代表header ul..参见fiddle
好的，已经将它放到了 hte 标题上，但现在我希望它位于标题的中间高度
你能告诉我们你为什么说“我已经尝试过使用margin-top，但它的最小值是-14px，这还不够。”如果你解释一下，也许会有意义。
我将 margin-top: -14 放在 li 中，但这不会做任何事情，我可能只是愚蠢

标签： html css button header href

【解决方案1】：

见fiddle

<li>标签不会在header上的原因是因为1empadding-top申请了header ul。

因此，header ul 的新 CSS 将是这样的

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

更新

要在标题内垂直集中链接，您可以使用 flexbox。

请查看使用

的fiddle

【讨论】：

是的，我之前从 cmets 修复了这个问题，但现在我希望它位于页眉的中间高度
也看看这个fiddle ..
按钮现在还可以，但我希望它们在屏幕右侧，而图片在左侧，我不知道该怎么做。 :(
太棒了.. :).. 很高兴它有帮助.. :)
呃，好吧，还有个问题，我好像不能把按钮放在屏幕右边，把图片放在左边？