Отображение таблицы и одинаковое пространство между элементами

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

Вы можете использовать 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>

Answer 2

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>