как сделать отзывчивые элементы li внутри ul в CSS

Question

Итак, я делаю навигационное меню в CSS, но я не могу понять, что оно правильно. У меня есть 4 li элементов внутри ul. Я хочу, чтобы пространство между этими элементами изменялось в зависимости от размера окна.

Я думал об использовании свойства margin-right с таким же значением, как 10%, поэтому элементы будут больше расходиться, если окно будет больше. Короче говоря, этот метод не работает, и я хотел посмотреть, знает ли кто-нибудь, как я могу заставить его работать. Я оставлю важный код ниже.

#links li{
    margin-right: 10%;
}

#navbar li{
    display: inline-block;
}

.container-nav{
    width: 85%;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

<nav id="navbar">
<div class="container-nav">
    <ul id="links">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">¿Quiénes somos?</a></li>
      <li><a href="#">Servicio</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
</div>

Большое спасибо за помощь!

Answer 1

Если вы установили стиль для ссылок как

#links{ display: flex; justify-content: space-between; }

Этот код устанавливает для ссылки ul быть гибким контейнером и равномерно распределяет элементы

https://codepen.io/adamjamesturner/pen/MWYNxrx

РЕДАКТИРОВАТЬ:

Проблема с вашим кодом заключается в том, что вам нужно установить ul в качестве flex-контейнера, который затем по умолчанию имеет flex-direction: row и так дает поведение, которое вы желаете.