使用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/ - ＆gt;的更新

我改变的只是#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;}