使用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> 

但是按钮并未在网站中显示。如何实现这一目标？

铬：

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;}