1

メニュー内のコンテンツ (ボタン) の量に応じて幅を自動調整するナビゲーション メニューを作成したいと考えています。

例えば：

ナビゲーション メニューには 4 つのボタンがあります。各ボタンには、テキストに応じて'min-width:25px'とがあります。max-'width:100px'

したがって、4 つのボタンすべてに同じ量のテキストがあり、すべてが に等しい場合50px、すべてのボタンを保持するナビゲーション メニューの DIV は、自動的に に調整され200pxます。次に、幅が の 5 番目のボタンを追加すると65px、nav-menu DIV は に自動調整され265pxます。

問題

ボタンは機能します (テキストの量に応じて幅が自動調整されます) が、ナビゲーション メニュー (nav-top) は自動調整されません。何が間違っているのかわかりませんが、簡単な修正だと思います。

DIV とすべてのボタンの私の HTML:

   <div id="nav-top" >

    <ul class="top-nav">
     <li><a href="">Home </a></li>
     <li><a href="">About Us </a></li>
     <li><a href="">Apply </a></li>
     <li><a href="">Contact </a></li>
    </ul>

   </div><!--nav-top-->

私のCSS：

/* Holds all the buttons */
#nav-top {
    min-width:200px;
    max-width:900px;
    height:35px;
    position:relative;
    background-color:#555;
    top:7px;

}


.top-nav {
    list-style:none;
    padding:0px;
    margin:0px;
    text-align:left;

}


.top-nav a {
   display: block;
   background-color: #888;
   color: #000;
   text-decoration: none;
   min-width:25px;
   max-width:100px;
   float:left;
   padding:7px;

}

.top-nav a:hover
{
text-decoration: none;
color: #fff;
background-color: #000;
}
4

2 に答える 2

1

ここでは、テーブル レイアウト スタイルを使用するとうまくいきます。display:table子に合わせて変化する will を持つ要素table-cell。

ul.top-nav{    
    display:table;
    max-width:900px;
    padding:0;
    margin:0;
}
ul.top-nav li {
   display: table-cell;
}

私の例を参照してください JSFiddle

于 2013-11-09T10:18:32.873 に答える
0

このフィドルはどうですか、次回は常にこの多くのコードにフィドルを使用してください

私はwidth外側の divを100%作成しました。それらはすべて収まるようになっています。li25%

于 2013-11-09T09:31:18.520 に答える