-1

標準の UL LI アプローチを使用して、Web サイトで 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;
}
4

2 に答える 2

2

min-widthコンテナに、またはを設定します<ul>。

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

CSS

ul{
    min-width:720px;
}

メニューの大きさに変更720pxします。そうすれば、その制限に達するまでサイズが変更されます。

于 2012-09-04T07:29:45.063 に答える
2

widthあなたがのように与えられていない場合はそれを定義してください

div
 { width:size %/px/em;
   min-width:%/px/em;
   position:absolute;
  }
于 2012-09-04T07:31:41.563 に答える