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水平導航菜單

回答

相關問題