居中全宽固定导航收割台

Question

我一直在努力解决这个问题。我已经尝试了各种各样的东西，并且我已经尝试过多次重写整个代码。

HTML:

  <header>
    <nav>
    <h1> Welcome</h1>    
    <ul>
    <li>Home</li>
    <li>Work</li>
    <li>About</li>
    <li>Contact</li>
        </ul></nav>
    </header>    

CSS:

header nav {
    border: 2px solid green;
 width: 100%;
 position: fixed;
 font-size: 1.3em;
 color: red;
 z-index: 10;
}
header nav ul {
 list-style: none;
 width: 90%;
 margin:0 auto;
}
header nav ul li {
 display: inline;
 width: 100%;
 margin: 0 auto;
}

我试图将li和h1集中在nav中，但我似乎只能缩进它。

所以这里还有一把小提琴。

http://jsfiddle.net/Ex3sh/

Answer 1

为标头应用text-align:center;

检查这个JSFiddle

旁注：<nav>用于表示带有导航元素的部分，对我来说，<h1>似乎不属于那里。。。您可能希望将其从nav中移出，并将其放置在<nav>上方的标头中