css 如何使列表项内联显示？[已关闭]

im9ewurl 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(89)

已关闭此问题为not reproducible or was caused by typos。它目前不接受回答。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这一个是解决的方式不太可能帮助未来的读者。
关闭7天前。
Improve this question
每当我在CSS中为列表项使用display: inline时，它不会做任何事情。

我想为列表项目显示内联。

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>

css

来源：https://stackoverflow.com/questions/68117014/how-do-i-make-my-list-item-display-inline

2条答案

按热度按时间

3ks5zfa01#

需要做一些小的改动：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>

赞(0）回复(0）举报 2023-10-21

cetgtptt2#

您需要将li应用于正确的元素。在这种情况下< li>，

li{
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>

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何使列表项内联显示？[已关闭]

2条答案

相关问题

热门标签

最新问答