Html 我如何定位无序列表（导航菜单）内部宽度：100%div？

编辑：固定的，非传统的（我想），我所做的就是左边距：自动；右边距：自动，导航菜单，给它一个我喜欢的固定宽度（1002px，在我的例子中），并使定位相对，并创建了另一个具有“模拟”背景的div，使其绝对。感谢那些提供解决方案的人，感谢他们

我想知道是否有人能帮我解决这个问题。目前正在设计一个网站，导航菜单分区没有固定的宽度（宽度：100%），在导航菜单分区内是无序列表“主页|关于|服务|画廊|联系人”。所以问题是，当我在浏览器中预览我的网站时，“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)
}

这是你的电话号码

使用以下代码：

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>

---

一个小小的预览对我们很有用耶，对不起，让我给你买点东西来吧，对不起，哈哈

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;
}