На мой взляд лучше подумать о другом дизайне.
Плохо делать маленькие элементы для мобил. Элементы должны быть такими, что бы можно гарантировано пальцем тыкнуть в него, а не в соседа.
А так можно поиграться с flex и размеры.
Идея примерно такая
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
body {
font-size: 16px;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
height: 1em;
overflow-y: hidden;
}
li {
padding: 0 4px;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li><a class="" href="">Item 1</a></li>
<li><a class="" href="">Item 2</a></li>
<li><a class="" href="">Item 3</a></li>
<li><a class="" href="">Item 4</a></li>
<li><a class="" href="">Item 5</a></li>
<li><a class="" href="">Item 6</a></li>
<li><a class="" href="">Item 7</a></li>
<li><a class="" href="">Item 8</a></li>
<li><a class="" href="">Item 9</a></li>
</ul>
</body>
</html>
Смотреть надо на мобилах. На десктопе трудно размер экрана уменьшить
