Html 全宽导航栏，居中右侧，内容区

我无法将全宽导航栏与固定内容区域居中。ul随浏览器或分辨率而变化

下面是我的问题：

css:

以下是html：

<div id="topribbon">  <ul>
        <li>Free Ground Shipping on all orders over $99!</li>
        <li>Why Us?</li>
        <li>Account</li>
        <li>Cart</li>
        <li>+1-800-555-5555</li>
    </ul>

超过99美元的所有订单均可免费地面运输
为什么是我们
帐目
推车
+1-800-555-5555

试试看

---

它将是跨浏览器稳定的？？？

以下是一个基本示例，说明我将如何做到这一点：

<div id="wrapper">
    <div id="outer">
        <div id="nav">
            <ul>
                <li>Free Ground </li>
                <li>Why Us?</li>
                <li>Account</li>
                <li>Cart</li>
                <li>555-5555</li>
            </ul>
        </div>
    </div>
</div>

---

小提琴：

您应该给内部ul一个位置：相对，一个宽度，然后使用边距：0自动

position:relative;
margin:0 auto;
width:980px; (for example)

---

（拉伸“结果”的空间）

您的导航条似乎居中，因为ul未固定到其位置。它不响应不同的浏览器和分辨率。我试图让我的ul始终固定在我的内容区域的右侧。我认为，这个带有

text align:right

的解决方案也适用于

ul

将给出notcho nachos想要的结果。

<div id="wrapper">
    <div id="outer">
        <div id="nav">
            <ul>
                <li>Free Ground </li>
                <li>Why Us?</li>
                <li>Account</li>
                <li>Cart</li>
                <li>555-5555</li>
            </ul>
        </div>
    </div>
</div>

    #wrapper{
    height: 5em;
    background: #000090;
    padding-top: 2em;
}
#outer{
    width: 100%;
    height: 3em;
    background: #000;
}
#nav{
    height: 3em;
    background: #ccc;
    width: 70%;
    margin: 0 auto;
    float: right;
}
#nav>ul>li{
     width: auto;
    list-style: none;
    display: inline-block;
    margin: 0 0 0 1em;
}

position:relative;
margin:0 auto;
width:980px; (for example)