如何使导航栏保持在一行中？

Question

我的页面顶部中央有一个可用的导航栏。但是，当我降低分辨率时，我的导航栏会自行展开成单独的行。我怎样才能让它保持在一行中？

这是我的 css:

#navbar {
display:inline-block;
width:100%;
position:absolute;
margin-left:25%;
margin-top:30px;
}

.navbar-li {
display:inline-block;
white-space:nowrap;
background-color:orange;
font-family:Arial;
margin-right:100px;
padding:20px 40px;
}

li {
font-size:20px;
}

HTML:

<div id="navbar"> 
    <ul>
        <li class="navbar-li">text1</li>
        <li class="navbar-li">text2</li>
        <li class="navbar-li">text3</li>

    </ul>
</div>

Answer 1

将 width: 设置为您希望导航栏始终保持的像素数量，不要使用百分比。这使得无论屏幕分辨率如何，它都保持相同的大小。

Answer 2

将 white-space: nowrap; 添加到您的导航栏

如何使导航栏保持在一行中？

How to make a navbar stay in one line?

html

css

navbar