导航固定右格式 CSS

Question

我正在尝试进行响应式设计，因此我正在尝试根据 %

制作宽度

在 jfiddle 中：http://jsfiddle.net/1x3whaat/

html

<div id="header">

<div id="callout">
Call us : 0123 456 7890
Support : 0123 456 7890
support@website.co.uk

</div>
<div id="logo">
    <a href=""><img src="img/logo.png" alt="Logo" title="Logo" /></a>
</div>
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Solutions</a>



        </li>
        <li><a href="">Consultancy</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>   


</nav>


<!-- /header -->
</div>

css

div#header{
max-width: 1600px;
width: 98%;
position: relative;
background: #ff99ff;

height: 150px;
}

div#header > div#callout {
width: 30%;
position: absolute;
top: 0px;
right: 0px;
background: #99ff99;
font: 4em;
}

div#header > div#logo > a > img {
height: 135px;
}

nav {
margin: 0;
padding: 0;
width: 60%;
position: absolute;
bottom: 0px;
right: 0px;
background: #066;
}

nav > ul {
list-style: none;
margin: 0 auto;
padding-right: 0;
}

nav > ul > li {
float: left;
border-left: 1px solid #c3b371;
border-right: 1px solid #c3b371;
border-bottom: 1px solid #c3b371;
border-top: none;
width: 13%;
}

nav > ul > li > a {
background: #fcf5d2;
display: block;

font-weight: normal;
font-size: 1em;
text-transform: uppercase;
color: #81673d;
text-decoration: none;
text-align: center;
height: 1.5em;
}

nav > ul > li > a:hover, nav > ul > li > a.active, nav > ul > li.active > a {
background-color: #482501;
color: #fff;
}

这是一张结果图：

这是我希望它看起来像的图片：

我试过摆弄浮动、填充、边距，改变它是固定位置的 nav 还是 ul，还有更多我不记得了。有人可以帮忙吗？

Answer 1

CSS :

nav > ul {
    list-style: none;
    margin: 0 auto;
    padding-right: 0;
    text-align:right;
    padding:0;
}

nav > ul > li {
    display:inline;
    border-left: 1px solid #c3b371;
    border-right: 1px solid #c3b371;
    border-bottom: 1px solid #c3b371;
    border-top: none;
    width: 13%;
}

并从 nav > ul > li > a 选择器中删除 display:block;。

导航固定右格式 CSS

Navigation fixed right formatting CSS

html

css

navigation

JSFiddle