Html 如何使导航条保持在一条直线上?
我有一个工作导航栏在我的页面的顶部中心。然而,当我降低分辨率时,导航条会分散成单独的行。我怎样才能强迫它保持在一条线上 以下是我的css:Html 如何使导航条保持在一条直线上?,html,css,navbar,Html,Css,Navbar,我有一个工作导航栏在我的页面的顶部中心。然而,当我降低分辨率时,导航条会分散成单独的行。我怎样才能强迫它保持在一条线上 以下是我的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;
#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:
文本1
文本2
文本3
将宽度:
设置为您希望导航条始终保持的像素量,不要使用百分比。这使得无论屏幕分辨率如何,它都保持相同的大小。添加空白:nowrap代码>到导航栏
<div id="navbar">
<ul>
<li class="navbar-li">text1</li>
<li class="navbar-li">text2</li>
<li class="navbar-li">text3</li>
</ul>
</div>