如何在 CSS 中的 ul 中制作响应式 li 元素答案

【问题标题】：how to make responsive li elements inside a ul in CSS如何在 CSS 中的 ul 中制作响应式 li 元素
【发布时间】：2020-05-19 10:02:30
【问题描述】：

所以我在 CSS 中做一个导航菜单，但我似乎无法正确获取它。我在 ul 中有 4 个 li 元素。我希望这些元素之间的空间能够响应地调整大小，具体取决于窗口的大小。

我考虑过将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>

非常感谢您的帮助！

【问题讨论】：

嗨，伊尼戈。你有没有想过使用 Bootstrap 来做到这一点？它具有制作响应式菜单所需的所有元素和 CSS！

标签： css flexbox alignment vertical-alignment

【解决方案1】：

如果您将链接的样式设置为

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

此代码将 Links ul 设置为 flex 容器并均匀地间隔元素

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

编辑：

您的代码的问题是您需要将ul 设置为弹性容器，然后默认情况下具有flex-direction: row 并提供您想要的行为。

【讨论】：