时间戳

首页 > 解决方案 > 如何使我的列表项内联显示？

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

问题描述

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

[![问题图片][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

标签： htmlcssresponsive-designresponsive

解决方案

需要进行一些小的更改： 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>

推荐阅读