html - cssを使用してヘッダーにボタンを追加する

Question

次のヘッダーにボタンを追加したい。次のようなレイアウトにする必要があります

http://www.fullstopinteractive.com/

ヘッダーCSS：

body {
    margin:0;
    padding:100px 0 50px 0;
}

div#header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:30px;
    background-color: #800080;
}

div#footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-color: #800080;
}

 @media screen {
    body>div#header {
        position:fixed;
    }

    body>div#footer {
        position:fixed;
    }
}

* html body {
    overflow:hidden;
}

* html div#content {
    height:100%;
    overflow:auto;
}

CSS：

#nav {
    float: right;
    padding: 42px 0 0 30px;
}

#nav li {
    float: left;
    margin: 0 0 0 5px;
}

#nav li a {
    padding: 5px 15px;
    font-weight: bold;
    color: #ccc;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#nav li a:hover, #nav li a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

HTML：

 <div id="header">  
  <ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">KPI</a></li>  
  </ul> </div>

しかし、ボタンはウェブサイトのように表示されていません。これを達成する方法は？

Chrome：

Answer 1

リンクを「ナビゲーションバー」の中央に配置することが目標である場合は、リンクをフローティングにしたり、絶対に配置したりしないでください。それらが中央に配置されていることを示すフィドルは次のとおりです。

http://jsfiddle.net/9vtB5/1/- >更新

私が変更したのは、次の最初の2つのルールだけでした#nav。

#nav {
    text-align:center;
}

#nav li {
    display:inline;
    margin: 0 0 0 5px;
}

Answer 2

#nav {
    text-align:center;

}

#nav li {display:inline-block;}