我的导航栏列表元素正在移至下一行，如何定位它们以适合单行？

Question

我添加了li个项目，但最后一个项目是离开导航栏并低于其[换行]，我希望他们以这样的方式进行样式设置，使它们全部显示在导航栏中我是菜鸟，请稍加解释...谢谢这是我的代码HTML代码：

 <header>
        <nav>
            <ul>
                <li><a href="" id="Logo">Myweb</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">Latest</a></li>
                <li><a href="">More</a></li>
                <li><a href="">About-Us</a></li>
                <li id="login"><a href="">Login</a></li>
            </ul>
        </nav>
    </header>

CSS代码：

body {
    margin: 0;
    background-color: #e4f5ff;
    padding: 0;
}

nav {
    vertical-align: middle;
    background-color: #022534;
    padding: 0;
    margin: 0;
    height: 20px;

}

nav li {
    align-items: center;
    justify-content: space-between;
    display: inline-flex;
    padding: 10px 5%;
    background-color: none;
    font-size: 35px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #e4f5ff;
}

#Logo {
    font-family: 'Poppins', sans-serif;
}

Answer 1

35的字体大小和5％的填充很大。如果元素不在一行中，它将不得不溢出。您可以做的是减小li元素的字体大小和左/右填充，使它们更适合一行。但是，请记住，当屏幕变小时，您将必须设置响应速度的样式，例如将导航栏变成汉堡菜单。

body {
    margin: 0;
    background-color: #e4f5ff;
    padding: 0;
}

nav {
    vertical-align: middle;
    background-color: #022534;
    padding: 0;
    margin: 0;
    height: auto;

}

nav li {
    align-items: center;
    justify-content: space-between;
    display: inline-flex;
    padding: 10px 5px;
    background-color: none;
    font-size: 25px;
    margin: auto;
}

a {
    text-decoration: none;
    color: #e4f5ff;
}

#Logo {
    font-family: 'Poppins', sans-serif;
}

<header>
        <nav>
            <ul>
                <li><a href="" id="Logo">Myweb</a></li>
                <li><a href="">Categories</a></li>
                <li><a href="">Latest</a></li>
                <li><a href="">More</a></li>
                <li><a href="">About-Us</a></li>
                <li id="login"><a href="">Login</a></li>
            </ul>
        </nav>
    </header>

Answer 2

简单地，执行li{width:16.66%}，以便它们将具有足够的宽度，以便彼此在ul或其他物体中相互容纳。