表格显示和项目之间的相同空格

Question

我有一个菜单，其中包含未知项目，未知文本（语言版本）等。

HTML标记是：

body {margin: 0;}
menu {display: table; width: 100%; background: lightblue; margin: 0; padding: 0;}
menu li {display: table-cell;}
menu li a {display: block; text-align: center; font-size: 18px; color: #000; padding: 20px 0;}

<menu>
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">REFERENCES</a></li>
    <li><a href="">OUR TEAM</a></li>
    <li><a href="">CONTACT</a></li>
</menu>

问题是，最长的物品周围有最大的空间。我需要在所有项目之间使用相同的空格。

我无法手动设置宽度/填充等。我不知道商品的长度，数量。

我在2种情况下附加了图像。第一项之前的空间和最后一项之后的空间可能较小，但宽度相同（例如，这两个20px，其他63px）。

有什么想法吗？

非常感谢。

Answer 1

menu{
    display: flex;
    justify-content: space-around;
    padding:0;
    }
menu li{
        list-style:none;
        }

<menu>
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">REFERENCES</a></li>
    <li><a href="">OUR TEAM</a></li>
    <li><a href="">CONTACT</a></li>
</menu>

Answer 2

您可以使用flex或grid来实现所需的功能。在这里使用space-evenly可能更合适。

menu{
    display: flex;
    justify-content: space-evenly;
    padding:0;
    }
menu div{
   padding: 0;
}

<menu>
    <div><a href="">HOME</a></div>
    <div><a href="">ABOUT</a></div>
    <div><a href="">REFERENCES</a></div>
    <div><a href="">OUR TEAM</a></div>
    <div><a href="">CONTACT</a></div>
</menu>

menu{
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows:2rem;
    grid-gap: auto;
    justify-content: space-evenly;
    padding:0;
}
menu div.one {
    grid-column: 1;
    grid-row:1;
}
menu div.two {
    grid-column: 2;
    grid-row:1;
}
menu div.three {
    grid-column: 3;
    grid-row:1;
}
menu div.four {
    grid-column: 4;
    grid-row:1;
}
menu div.five {
    grid-column: 5;
    grid-row:1;
}

<menu>
    <div class"one"><a href="">HOME</a></div>
    <div class"two"><a href="">ABOUT</a></div>
    <div class"three"><a href="">REFERENCES</a></div>
    <div class"four"><a href="">OUR TEAM</a></div>
    <div class"five"><a href="">CONTACT</a></div>
</menu>