如何制作项目之间具有可变间距的ul li css菜单

其想法是制作一份包含固定数量项目的菜单。每件物品上都必须有固定的填充物，以便在其周围放置边框时看起来像样。（到目前为止还不错） 但这些项目必须以固定大小、均匀间隔的div展开-项目本身的大小不会相同，因为这取决于这些项目中的文本

我搞不懂的是如何确保项目在一行上，它们之间的动态（或多或少）间隔在一个固定的div内（在我的例子中是1000px）。第一项应排在div的左边缘。最后一项应排在div的右边缘

以下是我到目前为止的情况。这已经在它上面添加了填充和边框，但是我不能设置一个边距：0 auto，我可以，但是它没有做任何事情。主要问题是，中间的间距应该是动态的，因为在缩放浏览器时，项目往往会跳转，这反过来会扰乱外部项目的对齐，甚至会使一些项目跳转到下一行。这就是为什么（缩放会把事情弄得一团糟——特别是固定宽度）我不愿意在每个项目上设置实际宽度（我知道我需要一个宽度来正确使用margin:0 auto，但即使我使用了宽度，它似乎也不符合我的要求）

#导航ul{
边际：0px；
填充：0px；
列表样式：无；
宽度：1000px；
显示：块；
}
#导航李{
浮动：左；
显示：内联；
}
#导航李a{
填充：10px 15px 10px 15px；
浮动：对；
显示：块；
边框：0.1em实心#DCE9；
颜色：#6d6f71；
文字装饰：无；
文本对齐：居中；
字号：18px；
字体大小：粗体；
}
#航行{
宽度：100%；
}

最简单的方法是使用表格而不是li项：您可以定义表格宽度，单元格宽度将自动计算

您可以选择以%为单位为它们指定宽度，使它们相等，或者决定按比例调整它们

---

无需担心表格：有时它们的工作更简单。

使用表格显示模式：

---

我不确定跨浏览器这是如何解决的…

flexbox模型最终会解决这个问题。根据原始规范，您需要将菜单单元格（需要收缩包装）与空单元格（需要相互争夺剩余空间）交替使用。或者在单元格内使用边框和边距或跨距，取决于最终想要的效果。但当然，补充单元格可能有用。我一直认为使用表格来满足非表格需求是一种糟糕的做法，但这值得考虑，因为没有其他解决方案接近我所需要的。这是一种夸张的说法：问题主要出现在使用表格进行普通布局时（很多人在过渡到css时很慢）。但是如果你很小心的话，就没有必要避免使用在精确情况下最适合解决问题的工具。如何动态地使项目之间的间距均匀？此代码将项目放在一行中，项目之间没有间距。我已经用float:left版本的菜单实现了同样的效果，但我不知道如何实现项目之间的自动间距。我调整了css以允许元素之间的间距：-请注意，如果任何文本中断为两行，事情会变得奇怪。

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}

#navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}