1

ULの幅を計算してリストアイテムの数で除算し、メニューが全幅に収まるように値を与えるJqueryがいくつかあります。

問題は、コードがAの文字列の長さではなくリスト項目を計算しているため、メニュー項目が完全に表示されないことです。

カートリッジ/シリンダーが正しく表示されず、Garden＆DIYが次の行にラップされます。

HTML：

<div class="container">
 <div id="new-menu-lower">
  <ul class="menuul">
   <li class="menuli">
       <a href="/test.aspx">Barbecues</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Stoves</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Lanterns</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Cartridges/Cylinders</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Coolers</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Boats</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Airbeds</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden & DIY</a>
   </li>
      <li class="menuli">
       <a href="/test.aspx">Toilets</a>
   </li>
  </ul>
 </div>
</div>

JQUERY：

//set the menu li sizes once everything has loaded.
$(document).ready(function() {
    $('div#new-menu-lower ul li').css('width', ($('div#new-menu-lower ul').width() / $('div#new-menu-lower ul li').length));
    $(function() {
        var menuWidth = $('div#new-menu-lower ul').width();
        var listItems = $('div#new-menu-lower > ul > li').length;
        alert('The UL is calculated at: ' + menuWidth + 'px');
        var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;
        $('div#new-menu-lower ul li').css('width', itemWidth);
    });
});

CSS：

div.container
{
    clear: both;
    margin: 10px auto 0;
    width:960px;
    border:1px solid red;
    height:700px;
}

div#new-menu-lower {
    border-radius: 3px 3px 3px 3px;
    border-top: 0 solid lightgrey;
    margin: 0 8px 10px;
}

#new-menu-lower ul {
    border: 1px solid orange;
    display: block;
    height: 27px;
}

#new-menu-lower ul li:first-child {
    border-left: 0 solid lightgrey !important;
    border-radius: 7px 0 0 7px;
}

#new-menu-lower ul li {
    background-image: url("http://i45.tinypic.com/16if95z.png");
    background-repeat: repeat;
    border-right: 0 solid lightgrey !important;
    float: left;
    height: 27px;
    padding-left: ;
    padding-right:;
    text-align: center;
    width: 168px;
    margin-left:1px;
}

デモ：http： //jsfiddle.net/rM9MW/45/

4

3 に答える 3

1

要素の幅から20ピクセルを差し引きますが、LI要素のマージンとパディングはゼロです。この20pxを消去する場合は、すべての要素から1pxを差し引いて、境界線の幅を含めることを検討する必要があります。

つまり、これを変更します。

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;

これに：

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 1;
于 2012-08-02T08:46:37.737 に答える
1

変化する

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 20;

に

var itemWidth = Math.floor(menuWidth * (1 / listItems)) - 1;

と

   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden & DIY</a>
   </li>

に

   </li>
      <li class="menuli">
       <a href="/test.aspx">Garden&nbsp;&&nbsp;DIY</a>
   </li>

デモを更新

于 2012-08-02T08:51:32.993 に答える
1

もっと簡単な解決策が使えると思います。私があなたのために作成したこのjsfiddleを見てください。

jqueryを使用する必要はありませんが、cssのみを使用します。

于 2012-08-02T08:52:26.737 に答える