html - CSS Center 全宽导航栏内容

Question

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

点击查看我的主题网站。

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

很困惑你到底是什么意思……也许这就是你想要的？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 2

尝试float:none;使用#topribbon ul

Answer 3

我的第一个猜测是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 中以使代码整洁 :) 然后您可以删除#topribbon ul不相关的宽度和边距属性

Answer 4

我不确定我是否完全清楚您要做什么，但是如果您想要浮动：正确的 UL，然后将其中的所有 LI 居中，您可以这样做：

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

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

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

如果您通过“以我的内容区域为中心”表示其他意思，您能解释更多吗？

Answer 5

就像其他人说的那样使用下面的 ul。然而，我和你一样难过，我是新手，所以如果我的代码有误，请随时告诉我。谢谢

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

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