CSS中心全宽导航栏<ul>内容</ul>

Question

我试图居中然后浮动：右边我的顶部固定导航栏与我的页面的内容区域。目前，导航栏已向右浮动，但不以我的内容区域为中心。

点击查看我的subject site。

CSS

#topribbon{
width: 100%; 
height: 30px; 
background-color: #AA1119 ; 
margin: -11px 0px 1em 0px; 
position: fixed; 
z-index: 9999; 
}
#topribbon ul{

padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}

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

</div> 

Answer 1

我的第一个猜测是 ul 元素的宽度不起作用。

试试这个

<div id="topribbon">  
    <div class="ribbonwrapper" style="width:980px;margin:0 auto;">    
     <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>
    </div>
</div>

将.ribbonwrapper的样式放入CSS以使代码整洁:)然后你可以删除不相关的宽度＆amp; #topribbon ul

的保证金属性

Answer 2

我不确定我是否完全清楚你要做什么，但是如果你想要的是浮动：对UL，然后将其中的所有LI放在中心，你可以这样做：< / p>

#topribbon ul { float:right; text-align: center; }

#topribbon ul li { display: inline-block; }

请务必从li样式块中删除float:right;。

如果您的意思是“以我的内容区域为中心”，您可以解释更多吗？

Answer 3

尝试使用float:none;

上的#topribbon ul

Answer 4

非常混淆你的意思正是我自己...也许这就是你想要的？的 jsFiddle

#topribbon {
    width: 100%;
    background-color: #AA1119;
    margin: -11px 0px 1em 0px;
    position: fixed;
    z-index: 9999;
    overflow:hidden;
}
#topribbon ul {
    padding:10px 0 8px;
    position:relative;
    margin:0 auto;
    width:980px;
    background:red;
    overflow:hidden;
}
#topribbon ul li {
    color:white;
    list-style:none;
    display:inline-block;
    line-height:20px;
    cursor:pointer;
    width:auto;
    padding:0 10px 0 10px;
    float:right;
}
#topribbon ul li:hover {
    color:#5C8FA5;
}

Answer 5

像其他人所说的

使用下面的ul。但是，我和您一样沮丧，我是新来的，因此，如果我的代码错误，请随时告诉我。谢谢

#topribbon ul { float:right; text-align: center; }

#topribbon ul li { display: inline-block; }