全宽导航栏居中，内容区域答案

【问题标题】：Full-width Nav bar centered-right with content area全宽导航栏居中，内容区域
【发布时间】：2013-08-08 19:36:43
【问题描述】：

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

这是我的问题：

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>

【问题讨论】：

您的导航栏似乎居中正常
ul 没有固定到它的位置。它不响应不同的浏览器和分辨率。我试图让我的 ul 始终固定在我的内容区域的右侧。

标签： html css nav menubar navbar

【解决方案1】：

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

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

http://jsfiddle.net/fwyNy/2/ （拉伸“结果”的空间）

【讨论】：

我认为这个带有text-align: right 的解决方案也适用于ul 会给出notcho nachos 正在寻找的结果。

【解决方案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;}

它应该是跨浏览器稳定的？？

【讨论】：

【解决方案3】：

以下是我将如何做的一个基本示例：

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

【讨论】：