Javascript 等间距居中对齐菜单

我有这样的菜单

Home  About  Privacy  Shopping  Contact Us

我想在其容器的中心显示此菜单（无论容器的宽度如何）。我可以对这些列表项应用20%的宽度，但由于文本大小不同，一些列表项之间的间距较大，而其他列表项之间的间距较小

<div id="container">
   <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Privacy</a></li>
      <li><a>Shopping</a></li>
      <li><a>Contact us</a></li>
   </ul>
</div>

家
关于
隐私权
购物
联系我们

在CSS中水平居中元素的最佳方法是给它一个特定的宽度，然后给它一个

边距：auto。这是一个我快速制作的例子。您可以看到
ul
（蓝色边框）的宽度为300px，它位于500px容器（红色边框）的中央。您可以按自己的意愿分隔列表元素。
此方法允许您使用20%的宽度并将项目置于容器的中心，同时保持每个项目的宽度相同

ul { 
list-style-type: none; 
width: 700px; 
margin: 0 auto; 
}

#container { 
width: 800px; 
background: #CC9;
}

li { display: block; 
float: left; 
width: 20%; 
margin-left: -5px;
background: #399; 
text-align: center; 
border: solid black 1px; 
color: white; 
}

你可以在这里看到

我添加了一个负的左边距来补偿我添加的边框，这样你就可以更好地了解它是如何工作的。我还将
ul
的宽度设置为700px。这可以是任何宽度

要在容器中心设置整个菜单，请将其添加到css中：

ul { margin: 0 auto; }

然后为容器添加一个宽度。这一切都在掌握之中。您可以将容器的宽度设置为所需的任何宽度。我的价格是800像素。
非常简单

div#container {
    width: 300px;
    margin: auto 0;
}
div#container li {
    display: inline-block;
    padding: 15px;
}

您肯定需要编写一些JavaScript来实现这一点。这就是我要做的

通过使用一点jQuery，您可以获得所需的动态大小的容器。
尝试使用Flex Box布局（）：

容器的确切宽度是多少。。？
好的，让我假设它的
960px
现在给你的
ul
元素
width
，这样
列表项就不会在第二行了。假设它现在已经花费了
600px
，在这种情况下，你在
中心制作菜单项的CSS将是：

.container{width:960px;}
.container ul{width:600px;margin:auto}

希望它能解决您的问题。
如果您可以添加包含元素（
nav
可能是最合适的），这里有一个很好的解决方案：

HTML:

预览：

如果希望每个
li
元素为容器宽度的20%，只需将容器设置为
width:100%
，并将每个
li
元素设置为
width:100%
（您还需要从
li
中删除边距并添加
文本对齐：居中）。

请参阅：
您完全不需要javascript来实现这一点！当你调整页面的大小时，链接会相互关联。他希望列表项的大小能够动态调整为页面内的文本大小。。。否决票是完全没有必要的。我只是想在这一点上走一条重要的道路。它完全能够使用CSS。@MichaelReader，问题标签：javascript，CSS html+1顺便说一句，这里绝对不需要Javascript。这是非常简单和典型的css编码。你的问题不清楚。菜单的宽度是固定的吗？你是在问如何水平居中吗？你是在问如何均匀地分配菜单项的宽度吗？使用19%的宽度会在右侧留下25像素的多余空白（随着内容大小的增加，空白会更大）。看见最好使用20%的宽度和负边距来补偿边界，或者将边界放在锚定标记上，而不是li。请记住…我将很快添加一个优雅的降级版本（实际上逐渐增强）。+1对于有趣的发现nav ul{left:50%；}nav ul li{right:50%；}
.container{width:960px;}
.container ul{width:600px;margin:auto}

<nav>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Shopping</a></li>
      <li><a href="#">Contact us</a></li>
   </ul>
</nav>

nav { overflow: hidden; }
nav ul {
    float: left;
    position: relative;
    left: 50%;
    padding: 0; 
    list-style: none; }
nav ul li {
    float: left;
    position: relative;
    right: 50%;
    margin: 0 10px; }
nav ul li a {
    padding: 5px;
    display: block; }