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

如果您的目标是使“导航栏”中的链接居中，则不应 float 它们或绝对定位它们。这是一个显示它们居中的 fiddle :

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

我只更改了 #nav 的前两条规则:

#nav {
    text-align:center;
}

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