如何水平排列导航栏中的列表？答案

【问题标题】：How to arrange the list in my navbar horizontally?如何水平排列导航栏中的列表？
【发布时间】：2022-01-15 09:26:28
【问题描述】：

我对 css 还很陌生，在处理一个项目时，我无法让 Inline-block 代码工作，我不明白为什么。我想水平而不是垂直排列导航栏菜单中的链接。

<nav class="navbar">
    <div class="max-width">
        <div class="logo"><a href="#">Roulathul <span>Uloom.</span></a></div>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

这是我的导航栏 HTML 代码。

.navbar .menu .li{
list-style: none;
display: inline-block;
}

这就是我使用内联块的地方。有什么建议吗？

【问题讨论】：

标签： html css list navbar

【解决方案1】：

用途：

.menu {
  display: flex;
}

【讨论】：

它工作了，但有一个小问题，现在它们被捆绑在一起，文本之间没有空格和项目符号。尝试在名称本身中使用空格，例如 home 但它不起作用
检查一下：css-tricks.com/snippets/css/a-guide-to-flexbox 在您的情况下，您必须使用justify-content。默认是flex-start，所以你可以玩space-between或space-around
您可以为每个列表项 (li) 添加右边距。

【解决方案2】：

这就是我主要将导航栏居中的方式，只需使用 display: flex 和 justify-content: 将元素隔开或居中即可。 More info on the flex property

.menu{
list-style: none;
display: flex;
justify-content: space-evenly;
}

【讨论】：

【解决方案3】：

我为空格添加了填充并删除了默认列表样式，希望这会有所帮助：-

.navbar {
    display: flex;
    align-items: center;
    top: 0px;
}

.navbar ul {
    display: flex;
}

.navbar ul li {
    list-style: none;
}

.navbar ul li a {
    display: block;
    padding: 5px 22px;
    text-decoration: none;
}

<nav class="navbar">
    <div class="logo">
        <a href="#">Roulathul <span>Uloom.</span>
        </a>
    </div>

    <ul>
        <li class="item"><a href="#Home">About</a></li>
        <li class="item"><a href="#Services">Services</a></li>
        <li class="item"><a href="#Clients">Skills</a></li>
        <li class="item"><a href="#Contact Us">Teams</a></li>
        <li class="item"><a href="#Contact Us">Contacts</a></li>
    </ul>

</nav>

【讨论】：