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

Question

标题说的差不多了。每当我在 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

Answer 1

需要做一些小的改动：nav-link 应该是最终 class 设置中的 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>

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

How do I make my list item display inline?

html

css

responsive-design

responsive