1

下の図に示すように、ナビゲーション メニューのサイズ変更または間隔の調整に問題があります。方法を知っている体があれば、私に知らせてください。ナビゲーションメニューボックスのサイズを変更して、最初のボックスが2番目のボックスのようになるようにします(サイズを小さくするため)。

ここに画像の説明を入力

HTML

<!--MENU-->
    <nav id = "main-nav-menu">
      <ul class="sf-menu">
        <li class="active"><a href="index.html">Home</a>

        <li><a href="about-us.html">ABOUT US</a> 
        </li>
        <li> <a href="services.html">SERVICES</a>
        </li>
        <li><a href="products.html">OUR PRODUCTS</a>
        </li>
        <li><a href="equipments.html">OUR EQUIPMENTS</a>
        </li>
        <li><a href="machine_list.html">MACHINE LIST</a>
        </li>
        <li><a href="contact.html">CONTACT</a>
        </li>
      </ul>
    </nav>
    <!-- end menu -->

CSS

#header .menu select {
border: 1px solid #CCCCCC;
display: block;
left: 4px;
position: relative;
top: 205px;
width: 250px;
}


#header .menu select {
display: block;
width: 200px;
}
4

1 に答える 1

0

これは、いくつかの単純な CSS ルールで実現できます。スタイルシート、またはスタイル シートを使用していない場合はスタイル ブロックで、リスト アイテムのパディングだけでなく、最大幅または最小幅を設定する必要があります。次のようなものを追加します。

li{max-width:60px;padding:4px;}

また

.sf-menu li{max-width:60px;padding:4px;}

また

main-nav-menu ul li{max-width:60px;padding:4px;}

これらはそれぞれ、メニュー項目の最大幅を 60px に設定します。必要に応じてこの値を変更してください。これは、すべてのアイテムに標準の幅があることを意味します。固定幅または最小幅を設定することもできます。

li{min-width:60px;width:100px;max-width:150px;}

パディングを追加して、一貫した外観を維持することもできます。

li{padding:4px 8px;} /* top & bottom padding of 4px, left & right padding of 8px */

このコードの例 - http://jsfiddle.net/kcdP4/

お役に立てれば

于 2013-05-02T03:19:34.233 に答える