Question

我在使用固定内容区域居中使用全角导航栏时遇到问题。 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>

Answer 1

试

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 2

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

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

你应该给内部ul一个位置：relative，a width然后使用margin：0 auto

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

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

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

3 个答案: