HTML菜单栏与屏幕大小调整

HTML menubar with screen resize

本文关键字:调整 屏幕 菜单栏 HTML      更新时间:2023-09-26

我想创建一个菜单栏

全屏时似乎一切正常,但当

它的浏览器宽度小于菜单栏

菜单栏中的内容变成了新的一行

而不是用滚动条继续行

我该怎么办

这是我的html

<div class="menuBar">
    <div class="navigate">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Hotel</a></li>
            <li><a href="#">Airfare</a></li>
            <li><a href="#">Package</a></li>
            <li><a href="#">Tour guide</a></li>
            <li><a href="#">Event</a></li>
            <li><a href="#">Contact us</a></li>
         </ul>
    </div>
</div>

为您的ul包装添加min-width样式。

.navigate{
   min-width: 800px;
}