Html 在一个宽度为1000%的容器内将几个链接居中？

我有一个nav项目列表，我希望最终能够浏览它，所以我创建了一个无序列表，最初宽度为1000%，用于测试，链接定位在内联块中。如果有足够多的链接填满整个页面宽度，那么这种方法效果很好，但是如果只有几个链接，它们会卡在导航的左侧，理想情况下，我想做的是将这些链接居中。我尝试将

text align:center

添加到导航中，但这会使链接在1000%的空间中居中，而不是在100%的页面宽度中居中。谁能推荐一个解决方案，因为我认为这可能只需要CSS就可以实现

JS Fiddle（只有几个链接）：

CSS

nav {
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    border: 1px solid #cccccc;
    border-left: 0;
    border-right: 0;
}

nav li {
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    margin-right: -4px;
    position: relative;
}

nav a {
    color: white;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #454545), color-stop(100%, #363636));
    background-image: -webkit-linear-gradient(#454545, #363636);
    background-image: -moz-linear-gradient(#454545, #363636);
    background-image: -o-linear-gradient(#454545, #363636);
    background-image: linear-gradient(#454545, #363636);
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 0 15px;
    width: 186px;
    display: block;
    border-right: 1px solid white;
    text-align: center;
  }

nav a.is-active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fe57ae), to(#fe329b));
background-image: -webkit-linear-gradient(#fe57ae, #fe329b);
background-image: -moz-linear-gradient(#fe57ae, #fe329b);
background-image: -o-linear-gradient(#fe57ae, #fe329b);
background-image: linear-gradient(#fe57ae, #fe329b);
}

.inner {
    width: 1000%;
}

使用以下命令：

.inner {
    white-space:nowrap;
    max-width: 1000%;
}

---

演示：

hi，当我现在调整大小时，链接会彼此下方。我希望无论浏览器的宽度是多少，它们都能并排出现？很好！我做的不一样，也没有那么老练。我将内部居中，这样它就可以从中心向外两个方向“滑动”。内部{宽度：1000%；左侧边距：-500%；左侧填充：50%；}