Question

我正在使用标准UL LI方法在网站上使用Html导航菜单。但问题是，当我调整浏览器窗口的大小时，菜单会调整大小，可视区域外的菜单项会向下移动。有没有遇到过类似的问题？ HTML

<div style="margin-top: 11px; display: block;" class="menubar">
<ul class="tabs">
            <li ><a  href="#">Menu1</a></li>
            <li><a  href="#">Menu2</a></li>
            <li><a  href="#">Menu3</a></li>
            <li><a  href="#">Menu4</a></li>
            <li><a  href="#">Menu5</a></li>
            <li><a  href="#">Menu6</a></li>

</ul>
</div>

CSS

 .menubar {
background: url("images/bg.png") repeat scroll left top #222222;
border-bottom: 1px solid #B2D7FC;
border-top: 1px solid #B2D7FC;
color: #FFFFFF;
float: left;
height: 35px;
margin: 10px 0 0;
padding: 0 2%;
width: 96%;
}
ul.tabs {
display: block;
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
ul.tabs li {
background: url("images/tab_right.png") no-repeat scroll right top transparent;
float: left;
padding: 0;
position: relative;
}

Answer 1

在容器上设置min-width，或<ul>。

<ul>
    <li></li>
    <li></li>
</ul>

CSS

ul{
    min-width:720px;
}

将720px更改为您希望菜单的大小。这样，它会调整大小直到达到该限制。

Answer 2

如果没有像

那样，请定义width

div
 { width:size %/px/em;
   min-width:%/px/em;
   position:absolute;
  }

Html水平导航菜单

2 个答案: