Html水平导航菜单

-1

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

<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; 
}

来源

2012-09-04 Anshuman Jasrotia

代码给出，请。当我们看到的只是单词时，我们如何才能解决与代码相关的问题？ – Kyle

没有任何代码我假设你遇到的问题是菜单的容器没有指定最小宽度，因此当容器变得更小然后组合菜单的宽度时，它们在彼此之下移动。 –

我已添加验证码。谢谢 –

请定义其width，如果你不喜欢

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

来源

2012-09-04 07:31:41

最小宽度是问题，并设置它解决了问题。谢谢 –

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

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

CSS的720px然而到大你想要的菜单是

ul{ 
    min-width:720px; 
}

变化。这样，它会调整大小，直到达到这个限制。

来源

2012-09-04 07:29:45 Charlie

Html水平导航菜单

回答

相关问题