html - コンテンツ エリアを含む全幅のナビゲーション バーを右中央に配置

Question

全幅のナビゲーション バーを固定コンテンツ エリアの中央に配置するのに問題があります。ULはブラウザや解像度によって変わります。

ここに私の問題のフィドルがあります:

http://jsfiddle.net/fwyNy/

対象サイト

CSS:

#topribbon{
width: 100%; 
height: 30px; 
background-color: #AA1119 ; 
margin: -11px 0px 1em 0px; 
position: fixed; 
z-index: 9999; 
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}

#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}

#topribbon ul li:hover{
color:#5C8FA5;

}

ここに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>

Answer 1

これが私がそれを行う方法の基本的な例です:

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

そしてCSS：

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

フィドル: http://jsfiddle.net/fqTwN/

Answer 2

試す

http://jsfiddle.net/Xxm76/34/

     .lContent {width: 200px; border: 2px solid #000; border-right: none; float: right;   position: relative;}
   .rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}

クロスブラウザーで安定しますか??

Answer 3

内側の ul に position:relative、width を指定してから、margin: 0 auto を使用する必要があります。

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

http://jsfiddle.net/fwyNy/2/ (「結果」のスペースを拡大)