0

メニュー内のいくつかのアイコンを右にオーバーフローさせ、ユーザーがメニューハンドルを右にドラッグすると表示されるようにしようとしています。問題は、インライン ブロック div がコンテナーのスペース全体をカバーしたくないということです。これは、コンテナーが小さい div に含まれているためです (アイコンが右に移動する距離を制限しているようです)。

画像では、(chrome 開発ツールによって) 青で強調表示されている div がアイコンのコンテナーです。何らかの理由で、線が全幅に収まらず、メニュー div で区切られた左側に凝縮されたままになります。

これがあまり混乱していなかったことを願っています。誰でも私を助けてもらえますか？アイコンがコンテナの幅を完全に占有するようにするにはどうすればよいですか? どうもありがとう！

説明画像 1

説明画像 2

コード：

jQuery によって設定されたアイコンの css

$("." + localIcons[iconToRender].name).css({
    "display": 'inline-block',
    "width": box_width,
    "height": box_height,
    "border-radius": '5px',
    "margin": box_margin / 2
 });

アイコン コンテナ:

// appended to the body: <div class="box-menu"> <div class="box-menu-icon-container"> </div> </div>

$( ".box-menu").css({
    "position": 'absolute',
    //Remember that the width of the menu is set by dragging the jQuery handle, so here I just set a minimum width equal to the size of the handle
    "width": box_menu_handle_width,
    "min-width": box_menu_handle_width,
    "max-width": box_menu_max_width,
    "height": box_menu_height,
    "left": 0,
    "top": '50%',
    "margin-top": -( box_menu_height / 2 ),
    "background-color": box_menu_color,
    "border-radius": '0px 5px 5px 0px',
    "overflow": 'hidden'    
  });

  $(".box-menu-icon-container").css({
    "height": box_menu_height - 60,
    "width": box_menu_max_width
  });
4

1 に答える 1

1

あなたの問題は、アイコンをメニュースペースにすることを意図したものに制限したままにしているということですbox-menu-handle。この例を参照してください。float: right

言い換えれば、メニュー幅を制御するハンドルによって定義される、メニューに割り当てられたスペースを超えてアイコンが「浸透」しないように設計されています。

本当にオーバーライドしたい場合は、それを排除しfloat: right、ハンドルを完全に右側に配置する必要があります。この例を参照してください。それがメニュースクリプトの他の側面とどのように相互作用するかはわかりませんが、アイコンが想定されているスペースを「オーバーラップ」し、メニューハンドルを通り越して侵入することを可能にします(これはあなたが望むもののようですが)何故かはわからない）。

于 2013-11-14T19:46:55.787 に答える