如何定位宽度内的无序列表（导航菜单）：100％div？

Question

编辑：修正，非常规（我认为），我所做的只是余裕：auto; margin-right：auto，nav菜单，给它一个我喜欢的固定宽度（在我的情况下为1002px），并且定位相对，并且创建了另一个具有“模拟”背景的div，并且使其成为绝对的。感谢那些提供解决方案的人，欣赏它。

想知道是否有人可以帮我解决这个问题。目前正在设计一个网站，其中导航菜单div没有固定宽度（宽度：100％），并且在此导航菜单div中是无序列表“主页|关于|服务|画廊|联系人”。所以问题是，当我在浏览器中预览我的网站时，“Home | About等”漂浮在左侧，当我向外滚动时，使页面变小，它继续向左漂浮。所以我的问题是，无需修复div的宽度，任何人都会知道如何定位这些无序列表，以便它与我的页面/内容的其余部分齐平或齐平。

继承人的CSS的导航菜单：

@charset "utf-8"; 
#navigation { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    height: 40px; 
    background-image: url(../pictures/nav_bg.jpg); 
} 
#navigation ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#navigation li { 
    float: left; 
} 
#navigation ul li a { 
    text-decoration: none; 
    float: left; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    color: #000; 
    text-align: center; 
    display: block; 
    width: 88px; 
    height: 30px; 
    background-image: url(../pictures/nav_button.jpg); 
    padding-top: 10px; 
} 
#navigation ul li a:hover { 
    background-image:url(../pictures/nav_button_hover.jpg) 
} 

Answer 1

这里是jsfiddle link

使用下面的代码：

HTML

<ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Service</a></li> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

CSS

ul.nav { 
    width:100%; 
    margin:0 auto; 
    padding:0; 
    list-style:none; 
    background-color:#62564A; 
    text-align:center; 
    font-family: sans-serif; 
} 
.nav li { 
    display:inline-block; 
    width:19%; 
    margin:0; 
    padding:0; 
} 
.nav a { 
    text-align:center; 
    padding:12px 0 13px 0; 
    margin:0; 
    border-right: 1px solid #fff; 
    display:block; 
} 
.nav a:hover { 
    background:#A26A42; 
    border:none; 
} 

ul.nav li:first-child a{ 
border-right: 1px solid #fff; 
} 
ul.nav li:last-child a { 
border:none; 
}