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

Question

ボタンを次のヘッダに追加します。

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：

それは

http://www.fullstopinteractive.com/

ヘッダーのCSSのようなレイアウトを持つべきです

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

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

クローム：あなたの目標は、「ナビゲーションバー」内のリンクを中央にある場合

Answer 1

、あなたはそれらをフローティングにするか、絶対にそれらを配置すべきではありません。ここでは中央にそれらを示しフィドルです：

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

私は#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;}