如何使我的列表项内联显示？答案

【问题标题】：How do I make my list item display inline?如何使我的列表项内联显示？
【发布时间】：2021-06-24 22:00:27
【问题描述】：

标题说明了一切。每当我在列表项的 css 中使用 display: inline 时，它什么都不做。

[![问题图片][1]][1]

我希望列表项内联显示，如果有人可以帮助指导我正确的方向，将不胜感激。

CSS

.clipit-routes {
    flex: 2;
    justify-content: center;
}

.nav-links {
    justify-content: space-around;
    list-style: none;
}

.nav-link {
    display: flex;
    text-decoration: none;
    display: inline;
}

HTML

            <div class="clipit-routes">
                <ul class="nav-links">
                    <li><a href="#" class="nav-link">Upload</a></li>
                    <li><a href="#" class="nav-link">About</a></li>
                    <li><a href="#" class="nav-link">Github</a></li>
                </ul>
            </div>


  [1]: https://i.stack.imgur.com/AidjI.png

【问题讨论】：

你能不能把显示问题的工作 sn-p 起来（即包括基本的 HTML）。你的意思是用 display: inline 覆盖 display: flex 吗？
有显示弯曲，没有它不会改变任何东西。 CSS Snippet 已经在帖子中了，我也会添加一个 html sn-p。
将 ul 作为显示内联不会影响 li 元素。您是否尝试将 li 元素内联？
是的！我正在尝试让 li 元素内联显示
我在 css 中添加了一个“.nav-link li”，并为它添加了一个显示内联。还是什么都没有。

标签： html css responsive-design responsive

【解决方案1】：

需要做一些小改动：nav-link 应该是最终类设置中的 nav-links，并且您想要内联的是 li 元素，而不是 ul 元素。

.clipit-routes {
  flex: 2;
  justify-content: center;
}

.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-links li {
  display: flex;
  text-decoration: none;
  display: inline;
}

<div class="clipit-routes">
  <ul class="nav-links">
    <li><a href="#" class="nav-link">Upload</a></li>
    <li><a href="#" class="nav-link">About</a></li>
    <li><a href="#" class="nav-link">Github</a></li>
  </ul>
</div>

【讨论】：